css3 省略号

example : 单行省略号

•     display: inline-block;
      width: 232px;
      height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

多行省略号

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

文本样式   

• text-transform: ;    // 控制元素中的字母（transform 变形）

• • capitalize
  • lowercase
  • uppercase 

• letter-spacing: ;    // 字符与字符之间的距离，对中英文都有影响

• word-spacing: ;    // 单词与单词之间的距离，中文无影响。

• white-space: ;    // 控制文本是否换行
  • white-space: nowrap;    // 文本永不换行

• 使用省略号的四个条件
  • 必须是 块元素 或者是 行内块元素 display: ;
  • 文本必须设置 white-space: nowrap; 永不换行
  • 多余文本截掉 overflow: hidden;
  • 设置省略号 text-overflow: ellipsis;    // 默认值为 "" 无省略号