在CSS中,处理文本溢出(Text Overflow)通常涉及到使用 overflow
属性和相关属性来控制文本在容器中的显示方式。以下是一些处理文本溢出的常见方法:
- 使用
overflow: hidden;
: 这会隐藏溢出的文本,并且不显示滚动条。这是默认行为。
.container {
width: 200px; /* 定义容器宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden;
text-overflow: ellipsis; /* 在溢出时显示省略号 */
}
- 需要显示多行文本情况。
.container {
/* // 设置只能显示三行文字,超出部分不显示 */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
/* 设置换行 */
word-break: break-all;
/* 强制换行 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; */
}