文本超出部分点点点显示

一、单行文本、超出部分点点点

1. 有宽度：width, 有宽度才能超出，所以至少是行内块级元素
2. 不能换行：white-space:nowrap;
3. 超出部分隐藏：overflow: hidden;
4. 文本超出部分点点点：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;
}