CSS 文本超出显示省略号
文本溢出显示省略号是常见的场景,在此不考虑 JS 处理,只用 CSS
处理。
单行文本溢出显示省略号
div {
width: 20px;
/* 限制内容溢出 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;
/* 文本不换行 */
white-space: nowrap;
}
多行文本溢出显示省略号
div {
width: 20px;
/* display 设置为-webkit-box 或者-webkit-inline-box */
display: -webkit-box;
/* -webkit-box-orient 必须设置为vertical */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 限制内容溢出*/
overflow: hidden;
}
- 多行文本溢出显示省略号的方法可能存在兼容性问题,具体请查看 MDN 文档。