在前端页面中,文字超过一行内容的情况,隐藏超出部分并且以省略号显示。css

今天在开发毕设项目的时候,产品介绍需要在前端显示,但是只要显示一行内容,那么应该怎样避免过长的产品介绍过多显示呢?我们可以隐藏超出部分并且以省略号显示。

在前端页面中,文字超过一行内容的情况,隐藏超出部分并且以省略号显示。css实现方法:

设置css样式
/* 规定段落中的文本不进行换行: */
            white-space: nowrap;
            /* 内容会被修剪,并且其余内容是不可见的。 */
            overflow: hidden;
            /* 显示省略符号来代表被修剪的文本。 */
            text-overflow: ellipsis 

结果:成功隐藏大部分内容并且只展示一行内容,但是没有出现省略号…不知道为啥

你可能感兴趣的:(前端,css,css3,html,javascript)