div或者span文字超出宽度时显示省略号

分类:计算机 | 前端 | 综合 654
更新:2020-10-05 23:26:48
编辑

实现方法

在div或者span中展示的文字如果超过了元素的宽度,希望将超出的部分用省略号表示,然后鼠标放到文字上面 的时候再显示完整的内容,可以使用如下代码实现

html代码:

<div>
  <span class="viewtitle" title="我是一串很长的文字,超过了指定的宽度后用省略号显示超出部分">
  我是一串很长的文字,超过了指定的宽度后用省略号显示超出部分
  </span>
</div>

css代码:

.viewtitle{
    display:inline-block; /*将span设置为行内块级元素,使其有宽度,这样下面设置的width才有效果*/
    width:150px; /*设置div或者span的固定宽度*/
    overflow:hidden; /*文字超出宽度部分隐藏*/
    text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本*/
    white-space:nowrap; /*文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止*/
    word-break:keep-all; /*只能在半角空格或连字符处换行*/
}

实现效果:

注意

因为html 行内元素是没有宽高的,所以对于来说要将它设置为块级元素或者行内块级元素(display:inline-block或display:block)以后,给它设置width才有效,才能实现文字超出指定宽度后显示省略号的效果。

而如果是div的话就没有必要设置display了,因为div本身就是块级元素。