CSS文本溢出

一、什么是CSS文本溢出

CSS文本溢出(overflow)指的是当内容超过一个容器的大小时，如何处理这些内容， 如何控制内容的显示和隐藏。

当文本超出容器边界时，可以通过设置容器的overflow属性来控制文本是否溢出容器，以及如何处理溢出的文本。

二、CSS文本溢出的属性

CSS文本溢出属性有三个:overflow、text-overflow和white-space

1、overflow

overflow属性用于处理内容溢出容器的情况。

overflow属性有4个值:

overflow: visible; /*默认值，溢出的内容会出现在容器外面*/
overflow: hidden; /*溢出的内容将被裁剪*/
overflow: scroll; /*溢出的内容将出现滚动条*/
overflow: auto; /*如果溢出，则出现滚动条，否则不出现*/

2、text-overflow

text-overflow属性用于控制溢出文本的表现形式。

text-overflow属性只适用于单行文本。

text-overflow属性有两个值:

text-overflow: clip; /*默认值，超出的文本将被裁剪*/
text-overflow: ellipsis; /*超出的文本将以省略号的形式显示*/

3、white-space

white-space属性用于控制文本换行的规则。

white-space属性有3个值:

white-space: normal; /*默认值，只要有需要，文本就会自动换行*/
white-space: nowrap; /*文本不会自动换行*/
white-space: pre; /*文本保留格式化之后的换行符*/

三、应用实例

1、文本截断

文本截断是指当文本长度超过容器宽度时，以省略号代替多余的文本内容，这种情况下，可以将overflow设置为hidden，white-space设置为nowrap，text-overflow设置为ellipsis。

div {
   width: 200px;
   white-space: nowrap; 
   overflow: hidden;
   text-overflow: ellipsis;
}

2、滚动条

如果希望当文本长度超过容器宽度时，出现滚动条，同时保持文本的原始格式，可以将overflow设置为auto，white-space设置为pre。

div {
   width: 200px;
   white-space: pre; 
   overflow: auto;
}

3、文本溢出

如果希望当文本长度超过容器宽度时，不出现滚动条，而是将文本隐藏掉，可以将overflow设置为hidden，white-space设置为normal。

div {
   width: 200px;
   white-space: normal; 
   overflow: hidden;
}

四、总结

在实际开发中，文本溢出处理经常用到，更好的控制文本溢出，可以将用户体验提升到更高的层次。