省略号 text-overflow

注：未完成

文本属性

1. 容器溢出：overfolw
   • visiable:默认值
   • hidden:内容会被修剪，并且其余内容是不可的
   • scroll:内容会被修剪，会出现滚动条
   • auto:如果内容被修剪，则出现滚动条
   • inherit:规定从父元素继承
2. 空白空间：white-space
   • normal:默认值，多余的空白会被浏览器忽略只保留一个
   • pre:空白会被浏览器保留
   • pre-wrap:保留一部分空白，但是能正常进行换行
   • pre-line:合并空白，保留换行符？
   • nowrap:不会换行，直到遇到
     
3. 文本溢出：text-overflow
   • clip:不会显示省略号(...),是简单的剪切
   • ellipsis:当文本溢出，显示省略号
4. 省略号设置：text-overflow

• 注：text-overflow属性仅仅是当文本溢出时是否显示省略标记，至于怎么显示，它的属性样式，还需要对其省略号的效果定义。
• 单行文本省略：
  • 容器宽度
  • 强制文本在行内显示 white-space:nowrap
  • 容器内容为溢出 overflow:hidden
  • 溢出文本显示省略号 text-overflow:ellipsis

<!--单行文本-->
{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
<!--多行文本-->
{
    width: 200px;/*不能加高度*/
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;/*从第三行开始省略*/
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
}