CSS文本溢出:在第二行省略号,这是可能的吗?我在网上找不到。
例子:
我想要的是这样的:
I hope someone could help me. I need
an ellipsis on the second line of...
但实际情况是这样的:
I hope someone could help me. I ...
CSS文本溢出:在第二行省略号,这是可能的吗?我在网上找不到。
例子:
我想要的是这样的:
I hope someone could help me. I need
an ellipsis on the second line of...
但实际情况是这样的:
I hope someone could help me. I ...
当前回答
如果有人试图让线夹在flexbox中工作,那就有点棘手了——特别是当您使用非常长的单词进行折磨测试时。这段代码片段中唯一真正的区别是min-width: 0;在包含截断文本的伸缩项中,以及换行:断字;。向https://css-tricks.com/flexbox-truncated-text/致敬。免责声明:在写这个答案的时候,Chrome以外的浏览器支持很差。然而,从那时起,情况可能有所改善。
.flex-parent { display: flex; } .short-and-fixed { width: 30px; height: 30px; background: lightgreen; } .long-and-truncated { margin: 0 20px; flex: 1; min-width: 0;/* Important for long words! */ } .long-and-truncated span { display: inline; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;/* Important for long words! */ } <div class="flex-parent"> <div class="flex-child short-and-fixed"> </div> <div class="flex-child long-and-truncated"> <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> </div> <div class="flex-child short-and-fixed"> </div> </div>
http://codepen.io/AlgeoMA/pen/JNvJdx (codeen版本)
其他回答
对于支持它的浏览器(大多数现代浏览器),只需使用行夹,对于较老的浏览器则退回到一行。
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@supports (-webkit-line-clamp: 2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
浏览器支持
我以前遇到过这个问题,没有纯css解决方案
这就是为什么我开发了一个小型库来处理这个问题(以及其他问题)。标准库提供了用于建模和执行字母级文本呈现的对象。例如,您可以模拟带有任意限制的text-overflow:省略号(不一定只有一行)
请在http://www.samuelrossille.com/home/jstext.html上阅读更多截图、教程和下载链接。
这是一个纯css的好例子。
.container{ width: 200px; } .block-with-text { overflow: hidden; position: relative; line-height: 1.2em; max-height: 3.6em; text-align: justify; margin-right: -1em; padding-right: 1em; } .block-with-text+.block-with-text{ margin-top:10px; } .block-with-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } .block-with-text:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; } <div class="container"> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a </div> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="block-with-text"> Lorem Ipsum is simply </div> </div>
我将这些css属性用于行省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;是在…之后的行数(3行)所示。
文本溢出的要求:省略号;工作是一行的空白(pre, nowrap等)。这意味着文本永远不会到达第二行。
因此。在纯CSS中是不可能的。
当我正在寻找完全相同的东西时,我的来源:http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)
编辑如果好的CSS神将实现http://www.w3.org/TR/css-overflow-3/#max-lines,我们可以在纯CSS中使用fragments(新)和max-lines(新)。还有一些关于http://css-tricks.com/line-clampin/的更多信息
编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2将把省略号放在第二行。