<前端重构>多行文本溢出显示为省略号

前端UI展示中，很经常遇到多行文本溢出展示的细节问题。大部分时候遇到的是一行文本显示不了全部内容时，则超出部分隐藏，只显示省略号，于是一开始我们的解决方案是：

.txt{
    display: block;
    height: 100px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

这种解决方案有2个限制条件：

1、必须设置white-space为nowrap

2、只能针对一行文本溢出的情况

当产品需求需要出现两行文本显示，溢出则省略号时，这种方案就没辙了。

---

一种新的解决方案能够适应产品的需求，而且在移动端自适应宽度的UI展示上也完美支持：

.txt{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 1;
    -moz-line-clamp: 1;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
}

这种方案需要设置5个属性：overflow、text-overflow、display、-xx-line-clamp、-xx-box-orient，其中-xx-line-clamp决定了文本显示的行数，如下截图：