CSS3中text-overflow的使用

一、text-overflow使用情况：

• 指定当文本溢出包含它的元素。

text-overflow的三个有效属性：

属性值	使用效果
clip	修剪文本，超出部分截断
ellipsis	显示省略符号(…)来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

二、单行文本溢满：

当目标文本超过预期定义的长度时，超出的内容可以通过text-overflow来进行直接修剪、使用…代替、使用自定义字符来显示。

示例：

.nameOverflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  /* 让超过预计宽度的元素使用...代替 */
  display: inline-block;
  vertical-align: middle;
  width: 350px;
}

三、多行文本溢满：

当多行文本的最后一行文本溢出需要多做处理时，同样可以使用text-overflow，但需要追加一个CSS样式-webkit-line-clamp: N，但要求尽量使用最新版的Chrome浏览器。

.nameOverflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  /* 让超过预计宽度的元素使用...代替 */
  -webkit-line-clamp: N; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  width: 350px;
}

四、JavaScrpit使用语法：

object.style.textOverflow="ellipsis"