为什么'text-overflow: ellipsis”在 Flexbox 中不能按预期工作？

text-overflow 与 Flexbox 不兼容

在此示例中，我们有一个文本内容为“ThisIsASampleText”的 Flex 容器。当我们将“display”属性设置为“flex”并将“text-overflow”设置为“ellipsis”时，我们期望文本被截断，但它没有按预期工作。

检查代码，我们注意到flex 属性应用于容器元素。但是，Flexbox 样式应该应用于子元素以影响其布局和属性。

要解决此问题，我们可以将“文本溢出”和相关样式移动到 Flex 子元素的单独类中。修改后的代码如下：

.flex-container {<br> display: flex;<br> text-align: left;<br>}<p>.flex-child {<br> 空白：nowrap；<br> 溢出：隐藏；<br> 文本溢出：省略号;<br>}</p><p></p><h1>灵活框</h1><br><div> <span class="flex-child"></div>

通过将截断样式应用于“.flex-child”类，我们现在在 Flex 容器中将文本正确截断为“ThisIsASAm...”。有关详细说明，请参阅下面链接的 CSS Tricks 参考文章。

参考：https://css-tricks.com/flexbox-truncated-text/

登录后复制

以上是为什么'text-overflow: ellipsis”在 Flexbox 中不能按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！