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

Question

.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

Answer 1

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

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

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