标签设定指定宽度，超出部分自动变成省略号，鼠标悬浮展示全部

今天在看前端页面，发现一个实用技能（很多朋友早已经玩烂的技能  哈哈……），对某个指定宽度的标签，当文本内容超出当前设定的宽度时，超出部分变成省略号，鼠标悬浮，显示全部内容。

 

display: block;
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 
ellipsis： 当对象内文本溢出时显示省略标记（...）。

在使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果

 

鼠标悬浮展示全部，则是在标签中增加 title 属性，例如：  <span  title="我是title，我很长的"></span>

 

完整示例：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test" title="我是全部示例，我可长********************可长****************可长************可长*******了">我是全部示例，我可长********************可长****************可长************可长*******了</div>