文本超出div部分,使用省略(...)表示

例子:

<div style="width:100px; text-overflow:ellipsis; white-space:nowrap; overflow: hidden;">
超级长的文本内容,超出部分会被省略掉。显示省略号!
</div>

备注:div必须标明宽度才可以使用,并且配合使用 white-space:nowrap; overflow: hidden

text-overflow : clip |ellipsis
              clip : 不显示省略标记(...),而是简单的裁切
         ellipsis : 当对象内文本溢出时显示省略标记(...)

 white-space : normal|pre|nowrap 
         normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行。
              pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。
                      如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等
                      同于 normal 。参阅 pre 对象。
        nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性。

       overflow : hidden的作用是隐藏溢出

你可能感兴趣的:(文本超出div部分,使用省略(...)表示)