[英]text-overflow: ellipsis not working with inline-flex
Why does text-overflow: ellipsis
not work when I use display: inline-flex
or display: flex
? 为什么在使用
display: inline-flex
或display: flex
时text-overflow: ellipsis
不起作用? My requirement is that I have to use a flexbox. 我的要求是我必须使用flexbox。
.test { display: inline-flex; line-height: 24px; width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: cyan; }
<label class="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. </label>
It would appear that text-overflow: ellipsis
doesn't work on anonymous flex items. 似乎出现
text-overflow: ellipsis
不适用于匿名flex项目。 Wrap the text in a span
, and apply the ellipsis there. 将文本换成
span
,然后在其中加上省略号。
.test { display: inline-flex; line-height: 24px; width: 200px; white-space: nowrap; background: cyan; } span { text-overflow: ellipsis; overflow: hidden; }
<label class="test"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum minima facilis a excepturi laborum similique</span> </label>
Try setting the inline-flex
on a parent div
, like this: 尝试在父
div
上设置inline-flex
,如下所示:
.test { line-height: 24px; width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: cyan; } .parent-div { display: inline-flex; }
<div class="parent-div"> <label class="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. </label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.