CSS文本溢出

发布时间：2023-05-20

一、什么是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;
}

四、总结

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

推荐文章