标签中的title属性内容显示过长

问题：

title属性一般可以用来提示因内容过长而省略的文字，但当内容过多时，title显示的内容会被拉的很长，用户体验非常不好。如下面这种情况。

解决方法

为了在不影响效果的前提下，还要考虑用户的体验感，可以摒弃title属性，新增一个标签，然后设置hover属性，当鼠标经过时，新增标签显示。

html

<div class="con">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

css

.con{position:relative}

.box1:hover+.box2{dispaly:block}  //设置hover属性，鼠标经过显示box2

.box2{
	display:none;
	width:200px;  // 根据实际开发需求设置宽度，高度不用设置，内容会自动撑开
	padding:8px;  // 为了美观，根据实际开发需求
	position：absolute;
	top：100%;  // 因为最外层包裹了一个div，所以box1会把con撑开，box1的高度就是con
				的高度，而box2的top就会继承con的高度，实现hover的自适应高度。
	left:50%;  // left的值继承了con的宽度
	word-break:break-all;  //英文或数字换行，否则得一直改，啊啊啊，这个很重要！！！
	z-index:999;
}

效果