html实现多行缩略显示,如何使用CSS实现多行文本的省略号显示

最新推荐文章于 2024-07-24 10:23:02 发布

红廉骑士兽

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量326

点赞数

文章标签： html实现多行缩略显示

原标题：如何使用CSS实现多行文本的省略号显示

曾经在项目技术评审的时候就有遇到过这种情况，多行文本由于高度限制又想出现省略号的需求，文本将为你揭开这个技术方案。

合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：

overflow: hidden直接隐藏多余的文本

text-overflow: ellipsis只适用于单行文本的处理

各种比较脆弱的java实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流(relayout)后的布局信息，如宽度

原文写作时间是2012.9.18号，比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-line-clamp，它并不是CSS规范中的属性。利用该属性实现多行文本的省略号显示需要配合其他三个属性：display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;。其中

-webkit-line-clamp设置块元素包含的文本行数；

display: -webkit-box设置块元素的布局为伸缩布局；

-webkit-box-orient设置伸缩项的布局方向；

text-overflow: ellipsis;则表示超出盒子的部分使用省略号表示。

不过本文将要介绍的方法是采用CSS规范中的属性，并结合特殊的实现技巧完成的。这意味着在实现CSS2.1规范的浏览器中都是可以兼容的，不将仅仅是纯粹的移动端领域，在传统的PC浏览器(你们懂得我指的是哪些浏览器)中仍是可行的。好吧，让我们一起见识下。

CSS实现多行文本溢出的省略号显示

我们把实现的细节划分为7个步骤，在这个实现过程中最简单的就是截断文本，而最难的部分则是让一个元素处在其父包含块溢出时的右下方，并且当父元素未溢出时该元素消失不可见。为了去难避易，我们先从比较简单的地方开始--当父包含框比较小时，将子元素布局到父包含框的右下角。

引子

其实这个实现完全利用了元素浮动的基本规则。在这里不详细讲解CSS2.1规范中的几种情形，不明白的读者自行查阅。这段代码实现很简单，就是三个子元素和包含块的高度及浮动设置：

模拟场景

我们通过创建一个子元素来替代将要显示的省略号，当文本溢出的情形下该元素显示在正确的位置上。在接下来的实现中，我们创建了一个realend元素，并利用上一节end元素浮动后的位置来实现realend元素的定位。

这一步中，我们主要关心的是realend元素的定位，基于浮动后的end元素设置偏移量，当end元素浮动到第一节第二章图的位置时(即在prop元素的下方)，此时realend元素正好处在end元素的上方50px，右侧300px-100px=200px处，而该位置正是父包含框wrap元素的右下角，此时正是我们期待的结果：