Question

我想使用flex创建一个矩阵（如果需要的话，也可以创建一个表）。我想要具有带有两种标题的行。

任何自动换行标题都不应使用省略号自动换行和剪切文本。
小心的包装器，它们不扩展其行，但是如果其他单元格扩展该行，则可以进行包装。这些将尽可能地包裹，然后用省略号剪掉其余部分。

这是我还没有弄清楚如何实现的第二个。我已经看了一些flex属性，因为它们听起来可能更接近我想要的效果。这些没有用，但是我将它们作为注释包含在相应的类中。

Brief example with the markup and styling that I have now.

寻找不带JS的解决方案，因为我可能宁愿让每个标头行都没有换行，而不是添加一堆代码。如果您确实建议解决此问题的代码，我当然仍然会看看。

HTML

.matrix {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  min-width: min-content;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cell {
  width: 100px;
  border: 1px solid black;
  flex: 1 0 auto;
}

.no-wrap {
  text-overflow: ellipsis;
  white-space: nowrap;
  hyphens: none;
  overflow: hidden;
}

.careful-wrapper {
  /* flex-basis: fill; */
  /* flex: initial; */
}

.expander {
  text-overflow: wrap;
}

<div class="matrix">
  <div class="row">
    <div class="no-wrap cell">My text should never wrap, no matter the sibling</div>
    <div class="expander cell">My content should wrap lines and therefor allow as many line-breaks to my sibling</div>
    <div class="expander cell"></div>
  </div>
  <div class="row">
    <div class="careful-wrapper cell">My text-should only wrap if my sibling divs expand the row. To see the effect my content needs to be longer than my siblings, excuse my rambling</div>
    <div class="expander cell"></div>
    <div class="expander cell">My content should wrap lines and therefor allow as many line-breaks to my sibling</div>
  </div>
</div>

fiddle

自定义允许在弹性矩阵中扩展一行的弹性项目

0 个答案: