一、单行文本、超出部分点点点
- 有宽度:width, 有宽度才能超出,所以至少是行内块级元素
- 不能换行:white-space:nowrap;
- 超出部分隐藏:overflow: hidden;
- 文本超出部分点点点:text-overflow: ellipsis;
div {
width: 200px;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
二、设置多行文本、指定行数、最后一行点点点
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
三、多行点点点遇到的问题:数字不会自动换行。
div{
word-break: break-all;
}