span设置长文本显示固定长度，超出部分省略号表示，鼠标移动文字上显示所有内容

曾经终败给现在 2023-10-05 09:08 18阅读 0赞

## span设置长文本显示固定长度，超出部分省略号表示，鼠标移动文字上显示所有内容 ##

### 解决方法 ###

思路为：设定width，并使文本内容强制单行显示，超出宽度部分用省略号隐藏。  
代码如下：

这是一句测试文本，超出宽度部分用省略号隐藏

css:

.tmp{
        
      white-space:nowrap;/*强制单行显示*/
      text-overflow:ellipsis;/*超出部分省略号表示*/
      overflow:hidden;/*超出部分隐藏*/
      width: 260px;/*设置显示的最大宽度*/
    }

运行后发现，宽度width未能生效，这是因为span标签属于行内元素（inline），所以无法设置高度和宽度；如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inline-block）。  
修改后代码如下：

css:

.tmp{
        
      white-space:nowrap;/*强制单行显示*/
      text-overflow:ellipsis;/*超出部分省略号表示*/
      overflow:hidden;/*超出部分隐藏*/
      width: 260px;/*设置显示的最大宽度*/
      display:inline-block;
    }

此时查看运行结果，省略号掩藏效果已经给出，但此时在span同行继续添加span显示文字时，产生了错位现象。此时需要给span添加元素的垂直对齐方式。

vertical-align: top

最后使鼠标移动到文字上显示全部，方法为在span标签中添加title字段，将文字填充至title中。下面为最终版本：

css:

.tmp{
        
      white-space:nowrap;/*强制单行显示*/
      text-overflow:ellipsis;/*超出部分省略号表示*/
      overflow:hidden;/*超出部分隐藏*/
      width: 260px;/*设置显示的最大宽度*/
      display:inline-block;
    }
    .tmp-next{
        
      vertical-align: top;
    }

js:

$.ajax({
        
                type : 'get',
                url: 'work/getWord',//数据来源，在controller层编写
                dataType:'json',
                success: function(datatmp){
        
                    document.getElementById('tmp').innerHTML =datatmp.word;
                    //将从数据源获取的datatmp中的word字段填充至id为tmp的标签中
                    $("#tmp").attr("title",datatmp.word);
                }
            })

如有问题欢迎留言指正