CSS 截断带有 flex-direction 列的 flexbox 父级中的文本

Posted 2023-03-05

【中文标题】CSS 截断带有 flex-direction 列的 flexbox 父级中的文本

【英文标题】：CSS Truncate text within a flexbox parent with flex-direction column

【发布时间】：2019-08-16 19:47:53

【问题描述】：

如何截断下面的文本？最小宽度：0；当 flex-direction 设置为 column 时，hack 不起作用。 answer 也没有。

.parent 
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;


.text 
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

【参考方案1】：

当您给align-items: center 时，text 会溢出parent 并且宽度不受约束，因此不会出现省略号。

如果您删除 align-items: center，它会起作用，因为 align-items: stretch 是默认设置 - 但现在图像会拉伸：

.parent 
  border: 1px solid red;
  display: flex;
  /*align-items: center;*/
  flex-direction: column;
  width: 300px;


.text 
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

解决方案

将width: 100% 添加到text - 请参见下面的演示：

.parent 
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;


.text 
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

最小宽度：0；当 flex-direction 设置为时，hack 不起作用 列。

请注意，在min-width: 0 中，如果要覆盖弹性项目宽度，因为它在行方向上是 auto（对于 column 方向，您使用min-height）。请参阅下面的示例以了解在 列 flexbox 中使用的 min-height: 0：

Flexbox resize and scrollable overflow

【参考方案2】：

将父类中的display: flex;替换为display: block，并在img标签中添加以下内容

.parent 
  border: 1px solid red;
  display: block;
  align-items: center; 
  width: 300px;


img  
    display:block;
    margin:auto;

.text 
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

【讨论】：

谢谢！虽然这也有效，但我接受了 kukkuz 的回答，因为它使用了 flexbox。

不用担心，很高兴为您提供帮助！