垂直书写模式 - 弹性容器内的文本剪辑

Question

<div style="display: flex; border: 1px solid blue;">
 <div id="test" style="border: 1px solid red;">
   <div style="border: 1px solid red; writing-mode: vertical-lr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 100%;">
        This is very long text that is rotated but should not stretch the blue div
    </div>
 </div>
  <div style="height: 50px; border: 1px solid green;">
      Text
  </div>
</div>

我想阻止红色 div 垂直拉伸蓝色 div。现在如果你添加一个高度：50px；对于带有 id=test 的 div，文本剪辑将明显出现，现在溢出包含在一个固定高度的元素中。我正在尝试使用 flex 实现同样的事情，因为我希望蓝色 div 的高度完全由绿色元素驱动，而红色元素的文本应该被剪裁。这甚至可能吗？

这是我想要的示例，但没有在红色元素上设置固定高度：https://jsfiddle.net/hmudz2ky/2/

Answer 1

您可以将元素设置为绝对文本，但其父元素和父元素的父元素为两列网格。

第一列的宽度来自一个隐藏的字符（是的，有点 hacky，在 after 伪元素上），它的高度来自第二个网格项。

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #test::after {
      content: 'T';
      writing-mode: vertical-lr;
      position: relative;
      top: 0;
      left: 0;
      opacity: 0;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div style="display: grid; grid-template-columns: auto 1fr; border: 1px solid blue;">
    <div id="test" style="border: 1px solid red;position: relative; height: 100%;width: fit-content; margin: 0; padding: 0; box-sizing: border-box;">
      <div style="border: 1px solid black; writing-mode: vertical-lr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 100%;position: absolute; top; 0; left: 0; width: 100%;box-sizing: border-box;">
        This is very long text that is rotated but should not stretch the blue div
      </div>
    </div>
    <div style="height: 50px; border: 1px solid green;">
      Text
    </div>
  </div>
</body>

</html>

垂直书写模式 - 弹性容器内的文本剪辑

Vertical writing mode - text clipping inside a flex container

html

css

flexbox

clipping