【零碎】css单行文本和多行文本溢出显示省略号

先看代码：

单行文本溢出显示省略号

overflow: hidden; /* 超出隐藏 */
word-break: break-all; /* 不换行 */
white-space: nowrap; /* 处理元素中的空白 */
text-overflow:ellipsis; /* 最关键的就是text-overflow: ellipsis */

多行文本溢出显示省略号

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; 
white-space: nowrap;
word-break: break-all;

• display: -webkit-box
• -webkit-box-orient: vertical; 子元素排列方式, 垂直
• -webkit-line-clamp 限制行数
• word-break: break-all; 非必须, 优化换行, 不会中文几个字就换行了

---

除了上述直接用原生支持的方式外也可以用偷巧的方式来进行处理
比如下面的方法意思是, 我画个图吧, 可以看下

image

设置line-height和height要倍数关系, 比如要显示两行就height是line-height的两倍, 最好用rem来定大小

.block {
  width: 150px;
  line-height: 1em; 
  height: 2em;
  position: relative;
  background-color: #f96868;
  overflow: hidden;
  word-break: break-all;
}
.block::after {
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:0 20px 1px 45px;
  background: #f96868 repeat-y;
}