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版本)
其他回答
如果有人试图让线夹在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版本)
我发现Skeep的回答是不够的,还需要一个溢出样式:
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
迟回复,但一个html换行也可以,所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法,但如果你用br打断了注释,text-overflow省略号将从html文本的下一行开始。
纯css方式用省略号修饰多行文本
调整文本容器的高度, 用-webkit-line-clamp控制断线:2;
.block-ellipsis {
display: block;
display: -webkit-box;
max-width: 100%;
height: 30px;
margin: 0 auto;
font-size: 14px;
line-height: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
太遗憾了,你不能让它工作超过两行!如果元素是显示块,高度设置为2em或其他,当文本溢出时,它会显示省略号,那就太棒了!
对于单个眼线,您可以使用:
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于多行,也许你可以使用Polyfill,如jQuery autoellipsis,这是在github http://pvdspek.github.com/jquery.autoellipsis/上