css3 省略号

Posted 2022-03-11 mailyuan

example

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

文本样式   

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

• • capitalize
  • lowercase
  • uppercase 

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

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

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

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