📅  最后修改于: 2023-12-03 15:24:09.022000             🧑  作者: Mango
在网页设计中,经常会出现文本超出容器的情况,这时候我们可以使用 CSS 中的文本溢出属性来处理。
text-overflow
属性用于控制文本溢出容器后如何处理。它只有在以下两个 CSS 属性配合使用时才能生效:
white-space: nowrap;
用于让文本不换行;overflow: hidden;
用于隐藏超出容器范围的部分。text-overflow: clip|ellipsis|string;
.container {
width: 200px;
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
上述代码演示了使用 ellipsis
进行文本超出容器部分的省略。
文本溢出属性 text-overflow
,可以使超出容器范围的文本进行剪裁或者用省略号或自定义字符串进行替代。在使用时,一定要注意配合 white-space
和 overflow
属性使用,才能起到正确作用。