两行文本溢出省略号

我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。

是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?

这是一个演示。

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。

什么好主意吗?

附注:没有JS解决方案，如果可能的话，纯CSS。

当前回答

对于那些在scss中工作的人，你需要在注释的开头添加!autoprefixer，这样它就会为postcss保留:

我遇到了这个问题，这就是为什么把它贴在这里

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参考

2020-03-11 10:44:15

其他回答

看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp

h2 { 显示:-webkit-box; max-width: 400 px; -webkit-line-clamp: 2; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; ｝ <h2> .</h2> .</h2> .</h2> .</h2> .</h2> .</h2> .

2015-06-19 14:28:09

下面是一个使用jQuery管理省略号的简单脚本。它检查元素的实际高度，并创建一个隐藏的原始节点和一个截断的节点。当用户单击时，它会在两个版本之间切换。

这样做的最大好处之一是，“省略号”像预期的那样位于最后一个单词附近。

如果你使用纯CSS解决方案，这三个点看起来离最后一个单词很远。

2017-06-07 08:04:55

你可以使用一个溶解的效果代替省略号，纯CSS，看起来更专业:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

这里我假设你的背景颜色是白色。

2020-07-07 14:01:47

我不确定你是否看过这篇文章，但Chris coyer的优秀的CSS- tricks.com网站在不久前发布了一个链接，这是一个纯粹的CSS解决方案，实现了你想要的。

(按此在CodePen上查看)

html, body, p { margin: 0; padding: 0; font-family: sans-serif; } .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content: ""; float: left; width: 5px; height: 200px; } .ellipsis>*:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; /* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ 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); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } <div class="ellipsis"> <div> <p> Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can. </p> </div> </div>

当然，作为一个纯CSS解决方案意味着它也是一个相当复杂的解决方案，但它工作起来干净而优雅。我将假设Javascript是不可能的，因为这是更容易实现的(可以说是更可降解的)Javascript。

作为额外的奖励，有一个完整过程的可下载压缩文件(如果你想了解它的话)，还有一个SASS mixin文件，这样你就可以很容易地把它折叠到你的过程中。

希望这能有所帮助!

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

2014-07-24 19:31:16

简单的CSS属性可以做到这一点。下面是一个三行省略号。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

2016-01-01 20:09:58

两行文本溢出省略号

推荐文章

最新文章

标签