css 处理文字溢出省略相关的样式

01.单行固定宽度溢出省略

  .text {
    width: 100px;
    white-space:nowrap;       /* 使文本不可换行 */
    overflow:hidden;          /* 隐藏溢出部分 */ 
    text-overflow:ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
  }

02.多行固定宽度溢出省略

``-webkit-line-clamp: 2; ` 关键是line-clamp属性, 从前缀可以看出是webkit内核的浏览器支持的样式.

ie之类的浏览器是不支持的.

 .text {
    width: 100px;
    word-wrap:break-word;         /* 内容存在英语或数字时强制换行 */
    overflow: hidden;             /* 隐藏溢出部分 */
    text-overflow: ellipsis;      /* 显示省略符号来代表被隐藏的文本 */
    display: -webkit-box;         /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
    -webkit-line-clamp: 2;        /* 限制块元素显示的文本的行数 */
  }