html中多行整体往后移,CSS实现多行文本的截断

CSS实现多行文本的截断

时间：2017-12-29     来源：CSS开发教程汇总

在一个网页中，文本的长度往往影响用户阅读的心情，过长或者过短，都会因此而漏掉很多的用户，因此合理的截断多行文本就成了一件很重要的事，通常会采用以下几种方式解决：

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

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

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

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

第一步：引子

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

第二步：模拟场景

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

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

若父元素并没有溢出，那么realend元素会出现在其右侧

这种情况解决很简单，请看下文之第七节，此处仅作实例说明。

第三步：优化定位模型

在第二节中，我们针对end元素设置了相对定位，对realend元素设置绝对定位。但是我们可以采用更为简单的代码来实现，即只使用相对定位。熟悉定位模型的同学应该知道，相对定位的元素仍然占据文本流，同时仍可针对元素设置偏移。这样，就可以去掉end元素，仅针对realend元素设置相对定位。

其他的属性并不改变，效果一样。

第四步：削窄prop元素

目前，最左侧的prop元素的作用在于让realend元素在文本溢出时处在其正下方，在前几节的示例代码中为了直观的演示，设置prop元素的宽度为100px，那么现在为了更好的模拟实际的效果，我们缩小逐渐缩小prop元素的宽度。

针对prop元素，缩小宽度为5px，其余属性不变;

针对main元素，设置margin-left:5px，让main元素左移5px，这样main元素在宽度上就完全占满了父元素;

对于realend元素，top、left和width的值不变。而设置margin-left: -100px、padding-right: 5px则是为了让realend元素的盒模型的最终宽度计算为5px。

具体可参考我之前的文章负margin的原理以及应用一文。

由于CSS规范规定padding的值不可以为负数，因此只有设置margind-left为负值，且等于其宽度。这样做的最终目的就是保证realend元素处在prop元素的下方，保证在文本溢出的情况下定位准确性:

第五步： 继续优化，流式布局+伪元素

目前，realend元素的相关属性仍采用px度量，为了更好的扩展性，可以改用%替代。同时，prop元素和realend元素可以采用伪元素来实现，减少额外标签的使用。

效果图和上节一样。

第六步：隐藏

之前的实现中在文本未溢出的情况下，realend元素会出现在父元素的右侧，正如：

解决此问题很简单，急需要设置：

即可解决问题。

第七步 大功告成

现在我们离完结就差一步了，即去掉各元素的背景色，并且用“…”替换文本。最后为了优化体验，采用渐变来隐藏“…”覆盖的文本，并设置了一些兼容性的属性。

到了此处，相信现在关心的只是css的代码了：

总结：

利用CSS实现多行文本的截断，大部分取决于我们对CSS的理解并巧妙运用，可能在极个别的浏览器中会存在渐变的问题，但是那都不是事，大家可以放心使用。