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

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

解决方法

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

<span class="tmp" id="tmp" >这是一句测试文本，超出宽度部分用省略号隐藏</span>

css:

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

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

<span class="tmp" id="tmp"></span>

css:

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

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

vertical-align: top 

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

<span class="tmp" id="tmp"  title=""></span>

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);
            }
        })

如有问题欢迎留言指正