资讯专栏INFORMATION COLUMN

翻译:如何使用CSS实现多行文本的省略号显示

lykops / 1508人阅读

摘要:利用该属性实现多行文本的省略号显示需要配合其他三个属性。这段代码实现很简单,就是三个子元素和包含块的高度及浮动设置模拟场景我们通过创建一个子元素来替代将要显示的省略号,当文本溢出的情形下该元素显示在正确的位置上。

</>复制代码

  1. 本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解。

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

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

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

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

</>复制代码

  1. 原文写作时间是2012.9.18号,比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-line-clamp,它并不是CSS规范中的属性。利用该属性实现多行文本的省略号显示需要配合其他三个属性:display: -webkit-box-webkit-box-orienttext-overflow: ellipsis;。其中,-webkit-line-clamp设置块元素包含的文本行数;display: -webkit-box设置块元素的布局为伸缩布局;-webkit-box-orient设置伸缩项的布局方向;text-overflow: ellipsis;则表示超出盒子的部分使用省略号表示。

</>复制代码

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

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

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

1st 引子



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

</>复制代码

  1. 1.prop
    float:left
  2. 2.main
    float:right
    Fairly short text
  3. 3.end
    float:right
  4. .wrap {
  5. width: 400px; height: 200px;
  6. margin: 20px 20px 50px;
  7. border: 5px solid #AAA;
  8. line-height: 25px;
  9. }
  10. .prop {
  11. float: left;
  12. width: 100px; height: 200px;
  13. background: #FAF; }
  14. .main {
  15. float: right;
  16. width: 300px;
  17. background: #AFF; }
  18. .end {
  19. float: right;
  20. width: 100px;
  21. background: #FFA; }
2cd 模拟场景

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

</>复制代码

  1. 1.prop
  2. float:right
  3. 2.main
  4. float:left
  5. Fairly short text
  6. 4.realend
  7. position:absolute
  8. 3.end
    float:right
  9. .end {
  10. float: right; position: relative;
  11. width: 100px;
  12. background: #FFA; }
  13. .realend {
  14. position: absolute;
  15. width: 100%;
  16. top: -50px;
  17. left: 300px;
  18. background: #FAA; font-size: 13px; }

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

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

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

3rd 优化定位模型

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

</>复制代码

  1. 1.prop
    float:right
  2. 2.main
    float:left
    Fairly short text
  3. 3.realend
    position:relative
  4. .realend {
  5. float: right;
  6. position: relative;
  7. width: 100px;
  8. top: -50px; left: 300px;
  9. background: #FAA; font-size: 14px; }

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

4th 削窄prop元素

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

</>复制代码

  1. 1.prop
    float:right
  2. 2.main
    float:left
    Fairly short text
  3. 3.realend
    position:relative
  4. .prop {
  5. float: left;
  6. width: 5px;
  7. height: 200px;
  8. background: #F0F; }
  9. .main {
  10. float: right;
  11. width: 300px;
  12. margin-left: -5px;
  13. background: #AFF; }
  14. .realend {
  15. float: right;
  16. position: relative;
  17. top: -50px;
  18. left: 300px;
  19. width: 100px;
  20. margin-left: -100px;
  21. padding-right: 5px;
  22. background: #FAA; font-size: 14px; }

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

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

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

</>复制代码

  1. BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

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

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

5th 继续优化:流式布局+伪元素

目前,realend元素的相关属性仍采用px度量,为了更好的扩展性,可以改用%替代。

同时,prop元素和realend元素可以采用伪元素来实现,减少额外标签的使用。

</>复制代码

  1. 2.main
    float:left
    Fairly short text
  2. /*相当于之前的prop元素*/
  3. .ellipsis:before {
  4. content: "";
  5. float: left;
  6. width: 5px; height: 200px;
  7. background: #F0F; }
  8. /*相当于之前的main元素*/
  9. .ellipsis > *:first-child {
  10. float: right;
  11. width: 100%;
  12. margin-left: -5px;
  13. background: #AFF; }
  14. /*相当于之前的realend元素*/
  15. .ellipsis:after {
  16. content: "realend";
  17. float: right; position: relative;
  18. top: -25px; left: 100%;
  19. width: 100px; margin-left: -100px;
  20. padding-right: 5px;
  21. background: #FAA; font-size: 14px; }

效果图和上节一样。

6th 隐藏

之前的实现中在文本未溢出的情况下,realend元素会出现在父元素的右侧,正如。解决此问题很简单,急需要设置:

</>复制代码

  1. .ellipsis{
  2. overflow:hidden;
  3. }

即可解决问题。

7th 大功告成

现在我们离结完就差一步了,即去掉各元素的背景色,并且用“...”替换文本。最后为了优化体验,采用渐变来隐藏“...”覆盖的文本,并设置了一些兼容性的属性。
到了此处,相信现在关心的只是CSS的代码了:

</>复制代码

  1. .ellipsis {
  2. overflow: hidden;
  3. height: 200px;
  4. line-height: 25px;
  5. margin: 20px;
  6. border: 5px solid #AAA; }
  7. .ellipsis:before {
  8. content:"";
  9. float: left;
  10. width: 5px; height: 200px; }
  11. .ellipsis > *:first-child {
  12. float: right;
  13. width: 100%;
  14. margin-left: -5px; }
  15. .ellipsis:after {
  16. content: "2026";
  17. box-sizing: content-box;
  18. -webkit-box-sizing: content-box;
  19. -moz-box-sizing: content-box;
  20. float: right; position: relative;
  21. top: -25px; left: 100%;
  22. width: 3em; margin-left: -3em;
  23. padding-right: 5px;
  24. text-align: right;
  25. background-size: 100% 100%;
  26. /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  27. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  28. background: -webkit-gradient(linear, left top, right top,
  29. from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  30. background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  31. background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  32. background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  33. background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  34. }

总结之兼容性

从上文的实现细节来看,我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算,唯一存在兼容性问题的在于无关痛痒的渐变实现,因此可以在大多数浏览器下进行尝试。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116568.html

相关文章

  • 如何文本显示两行——块级文字省略

    摘要:在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。 在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。 单行文字的省略 单行文字省略比较简单。关键代码如下: .single { width: 280px; ...

    BetaRabbit 评论0 收藏0
  • 如何文本显示两行——块级文字省略

    摘要:在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。 在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。 单行文字的省略 单行文字省略比较简单。关键代码如下: .single { width: 280px; ...

    zollero 评论0 收藏0
  • css实现单行、多行文本超出显示略号

    摘要:前言项目中我们经常遇到这种需求,需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记,而是将溢出的部分裁切掉。 前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...

    wing324 评论0 收藏0
  • css实现单行、多行文本超出显示略号

    摘要:前言项目中我们经常遇到这种需求,需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记,而是将溢出的部分裁切掉。 前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...

    paulquei 评论0 收藏0
  • css实现单行、多行文本超出显示略号

    摘要:前言项目中我们经常遇到这种需求,需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记,而是将溢出的部分裁切掉。 前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...

    maxmin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<