css实现内容超出显示省略号且触碰显示完整内容

css 样式

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

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

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

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

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

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

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