css - 如何截断方向列 flexbox 子项内的字符串

Question

我浏览了 csstricks 的文章，https://css-tricks.com/flexbox-truncated-text/

我的问题是当 .flex-parent 具有 flex-direction: column; 属性时如何让它工作。

感谢您的帮助!

Answer 1

这实际上只是重新排列一些属性的问题，但自然这个答案取决于元素需要。

这里的要点是，如果您希望它成为一列，本质上，您在 .flex-parent 中包含的每个顶级元素，当它设置为列方向时，将显示为这样.因此，它的右边没有任何东西可以截断。

所以本质上，如果您希望顶级元素是一列并截断其中的内容，那么实现它的一种方法是将它们都包含在同一“行”或 .flex-child 。然后该行是您可以识别对齐和对齐属性的地方。

.flex-parent {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 30px 0;
}
.flex-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0; /* or some value */
}
.long-and-truncated-with-child-corrected h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.short-and-fixed > div {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: lightgreen;
    display: inline-flex;
}

/*nonessentials*/
body {
  padding: 40px;
}
h2 {
  font-size: 1rem;
  font-weight: normal;
}
.flex-parent {
  background: rgba(0,0,0,0.1);
}

<div class="flex-parent">

  <div class="flex-child long-and-truncated-with-child-corrected">
    <h2>This is a <em>long string</em> that is OK to truncate please and thank you. Some more text to demonstrate, if the string is <b>REALLY</b> truncated</h2>
    <div class="flex-child short-and-fixed">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

</div>