使用display：flex时文本溢出不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

.flex-container {

display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>
Output: ThisIsASamp  
Expected: ThisIsASam...

当我删除flex属性时，它工作正常。

我想知道为什么柔韧性会影响省略号。

TIA

回答：

您的问题在于缺少“灵活的孩子”。这些将需要包含样式以截断元素，而不是父容器。

尝试将truncate属性移动到一个单独的.flex-child类，如下所示：

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

以上是 使用display：flex时文本溢出不起作用 的全部内容， 来源链接： utcz.com/qa/431146.html

回到顶部