css设置换行-span 设置长文本显示固定宽度，超出部分用省略号表示，所有内容在鼠标上显示联通文本

span设置长文本显示固定宽度css设置换行，超出部分用省略号表示，鼠标上显示全部内容联通文本解决方案

思路是：设置宽度，强制文本内容单行显示，超出长度的部分用省略号隐藏。

代码如下所示：

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

CSS：

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

运行后发现宽度无法生效。 这是因为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;
}

此时查看运行结果css设置换行，疗效已经被省略号覆盖，但是此时当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);
            }
        })

如有疑问请留言并见谅