[分享]css两行代码超出显示省略号

CSS中有一种常见的需求，就是在某些元素超出显示范围时，将超出的内容截断并显示省略号。这种截断方式可以通过下面这两行CSS代码来实现：textoverflow: ellipsis; whitespac...

CSS中有一种常见的需求，就是在某些元素超出显示范围时，将超出的内容截断并显示省略号。这种截断方式可以通过下面这两行CSS代码来实现：

text-overflow: ellipsis;
white-space: nowrap; 

上述代码使用了text-overflow和white-space两个CSS属性。其中，text-overflow属性定义了超出元素宽度时的截断方式，而white-space属性则定义了如何处理文本中的空白字符。

text-overflow属性有三个值可选：clip、ellipsis和string。其中，clip表示超出部分直接被裁剪掉，不显示任何省略号；ellipsis则表示以省略号结束超出部分；string则可自定义用于截断的字符串。在常见的应用中，ellipsis是最常用的值。

white-space属性则有几个取值：normal、nowrap、pre、pre-wrap和pre-line。其中，nowrap表示文本不换行，超出部分直接截断；pre和pre-wrap则保留原始的空白字符，而不会将它们折叠成一个空格。

两行代码的组合使用可将超出元素宽度的文本内容截断，并在末尾添加省略号。如果需要对文本在某定宽度内自动换行，可将white-space属性设置为normal或者省略掉不设置。