单行文本溢出
1 2 3 4 5
| .overflow-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
多行文本溢出
1 2 3 4 5 6
| .overflow-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
|
多行文本溢出兼容 IE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .overflow-text { overflow: hidden; position: relative; height: 38px; &::after { font-size: 18px; content: "..."; position: absolute; bottom: 0; right: 0; width: 24px; height: 19px !important; background-color: #fff; } }
|
JS 解决文本溢出
1 2 3 4 5 6 7 8 9 10
| this.$nextTick(() => { for (let i = 0; i < this.$refs.textHeight.length; i++) { const list = this.$refs.textHeight[i]; if (list.offsetHeight > 70) { list.className = "sub-title overflow-text"; } else { list.className = "sub-title"; } } });
|