一、什么是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;
}
四、总结
在实际开发中，文本溢出处理经常用到，更好的控制文本溢出，可以将用户体验提升到更高的层次。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198412.html
微信扫一扫 
支付宝扫一扫 