css实现文本框中内容超出长度显示省略号，鼠标移入悬浮显示全部内容

css样式：

    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;

此时的设置可以完美实现文本框中的内容超长显示为省略号；但是想知道全部内容是不可能的。

<div title="文本框中的内容，超长显示省略号">文本框中的内容，超长显示省略号</div>

采用title属性后，就可以悬浮展示文本框中的内容；但是有个弊端，就是长度没有很长的时候，文本框中的全部内容能全部展示，此时的悬浮是没有必要存在的，但是实际上还是有的；

对于展示文本框中全部内容还有两种方式实现：

// 方法一，放开宽度限制
div:hover{
     width: auto;
}

// 方法二，释放截取，即不显示省略号
div:hover{
    text-overflow:inherit; 
    overflow: visible; 
    white-space: pre-line; 
}

这两种方法都有一个明显的弊端，不管是放开宽度限制，还是释放overflow的截取，都会导致界面布局的错乱，即会影响其他元素的布局效果；

补充内容：

缺陷场景：一句超长文本，在span中展示，但是span宽度只有100px，导致文本是换行展示的，这时再用text-overflow: ellipsis;overflow: hidden;属性无法实现省略号的样式；

原因分析：span中添加了属性white-space：normal；

当行内样式添加了属性white-space：normal时，显示省略号的样式会不生效；

这个属性是布局建立过程中，对空白符的处理，normal值是忽略全部的空白；

而当参数值为nowrap时，样式会正常显示，因为这个属性的含义是：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止；这样就保证了文本在一行中显示，不会出现换行后不省略文本的情况；

总结or结论：省略超出文本，以省略号展示的样式设计时，

单行文本的省略：（已验证）

正确必备的属性是width、overflow、text-overflow；

不必备的属性：white-space，值为nowrap；适用于宽度很小，内容很长时，固定文本在一行中展示，切不可用normal属性值！！！

多行文本的省略：（未验证autoprefixer工具）

必备属性：

    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /*3表示只显示3行*/
    /* autoprefixer: off */ 
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

注释掉的两行作用：autoprefixer(浏览器前缀处理工具)会自动移除老式过时的代码，所以先关闭这个 工具再打开，防止代码被移除；