除了利用JS实现将超出的字数隐藏外,还可以利用CSS帮我们来实现。
我们可以使用三个属性来实现,分别是:
①、overflow:hide
overflow 属性规定当容器内的文本内容溢出时,容器所发生的事情。hide值指明了溢出的内容会被修剪。
②、text-overflow:ellipsis
text-overflow 属性规定当容器内的文本内容溢出时,容器所发生的事情。ellipsis值指明了溢出的内容将以省略符号来表示。
③、white-space: nowrap
white-space属性设置容器如何处理容器内的空白。nowrap值规定了段落中的文本不进行换行,即只用一行显示。
所以我们的目标是,不管宽度故不固定,我们都要将文本结点的所有内容只在一行显示(white-space: nowrap),然后再根据容器的宽度将多余的内容剪切(overflow: hide)。而剪切的方式主要是两种,一种是多余的内容用省略号显示(text-overflow: ellipsis),另外一种是直接剪切(无text-overflow属性)。
效果如下所示:
注意:如果想要剪切文本,就必须指定文本结点不换行,否则文本元素由于换行并不会超过容器宽度,所以也就没有多余的字符串可以剪切。例如下面效果所示:
主要代码:
#Container{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}