CSS实现将超出DIV宽度的文字隐藏或用省略号表示

版权声明：转载请标明出处，谢谢合作 https://blog.csdn.net/Rao_Limon/article/details/81635637

除了利用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;	
	text-overflow:ellipsis;
	white-space: nowrap;
}