文字单行溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
复制代码
多行文字溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
文字溢出可以使用此属性(Text Overflow )截断溢出的文本。指在文本超出元素宽度时,自动隐藏超出部分的文本。在 CSS 中,可以使用 text-overflow 属性来实现这种效果。可以使用省略号 (...) 或自定义字符串对其进行截取缩略显示。
下面是一个简单的代码示例:
.overflow-ellipsis {
width: 100px; /* 定义元素的宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */
}