FED实验室 - 专注WEB端开发和用户体验

煦涵说CSS:line-clamp

煦涵说 煦涵 246℃ 0评论

在日常前端开发需求中经常会有限制文本行数的需求,尤其在列表、图文混排等需求中,当需求是单行文本溢出时,我们可以选择使用 text-overflow 属性,当有多行文本需求时,我们可能首先想到使用 javascript 来处理,本文将和大家一起来认识一个新的 CSS 属性 line-clamp,这个属性现在是非标准属性,旨在解决多行文本截断问题,使用该属性时,有很多需要注意的地方,下面将一一道来。

煦涵说-深入CSS属性系列

优点

1.ellipsis支持

这个功能在我们处理多行文本时,是的确有益的,我们可以根据我们的需求来设置任意的行数,来适应我们的需求,并显示省略号溢出提示。

2.友好的向后兼容

我们可以使用 CSS 条件判断 @support(line-clamp: number) {} 来做向后兼容处理,比如如下代码:

.line-clamp {
    position: relative;
    width: 100px;
    height: 3.6em;
    overflow: hidden;
    line-height: 1.2em;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.line-clamp:after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "...";
    height: 1.2em;
    line-height: 1.2em;
    padding: 0 3px;
    text-align: right;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
@supports(-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .line-clamp:after {
        display: none;
    }
}

缺点及注意事项

1.浏览器支持

IE、Microsoft Edge、Firefox、Opera Mini 不支持 -webkit-line-clamp ,Webkit 内核的浏览器需要使用 -webkit 前缀。详细请参考CanIUse:line-clamp: http://caniuse.com/#search=line-clamp

2.属性依赖

需要依赖 overflow: hiddendisplay: -webkit-box-webkit-box-orient: vertical,如下:

.line-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

3.不支持 direction

当设置文本方向为 direction: rtl 时不起作用,-webkit-line-clamp 会被忽略。

4.奇怪的断点处理

-webkit-line-clamp 文本断行情况,并不是和之前[煦涵说CSS:文本断行]一文中的 软性断行机会点 情况一致, 它常常在某个词的中间断行,比如 "I am a fashion man" 经过设置 line-clamp 后,情况可能是 "I am a fash...",这样的坏处时,可能会引起文本的歧义,特别是在文章标题等重要内容处理需求时。

5.省略号不可用其他字符替代

该属性不像 text-overflow 在 Firefox 浏览器中可以使用特殊字符替换(当然现在标准还么有支持,支持情况也不容乐观)。

6.无空格文本不支持

当我们在一段文本中无空格时,使用 -webkit-line-clamp 不会生效。

7.不同语言 ellipsis 语义不同

在不同语言中 ellipsis 对应的语义不同,比如波兰语中,省略号表示语音的中断或者暂停,而在CJK语言中,省略号表示语句没有说完,更常见的是省略号应该是文本行垂直居中的,但是现在 line-clamp 属性是不支持的。更多不同请参考Wikit Ellipsis: https://en.wikipedia.org/wiki/Ellipsis

Opera 独特兼容方案

Opera浏览器对此属性在未来支持如何如何仍尚未可知。

.line-clamp {
    height: 3.6em;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
}

Javascript 兼容方案

1.简单实现方案:

const clamps = document.querySelectorAll('.line-clamp');
[].forEach.call(clamps, (item, index) => {
    let clientH = item.clientHeight;
    while (item.scrollHeight > clientH) {
        item.textContent = item.textContent.replace(/\W*\s\S*$/, '...');
    }
})

2.建议的实现方案
* clamp.js
* ftellipsis

简单的实现方案,不建议采用,如果需要使用在生产环境中,建议使用以上两个方案,其基本实现思路根据行高、行数、容器高度进行判断,进行截断处理。

感谢您的阅读

EOF

作者[煦涵]

2017年07月15日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址