垂直写作模式 - 在挠性容器中剪辑文字

发布于 2025-01-24 15:49:48 字数 828 浏览 1 评论 0原文

<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。现在，如果添加一个高度：50px;在ID =测试的DIV上，文本剪辑将显示为显然，现在溢出包含在固定高度元素中。我正在尝试实现同一件事，但使用Flex，因为我希望蓝色的高度纯粹由绿色元素驱动，而红色元素的文本应仅剪切。这甚至可能吗？

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

原文

https://jsfiddle.net/hmudz2ky/1/

<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>

I would like to stop the red div from stretching the blue div vertically. Now if you add a height: 50px; to the div with id=test the text clipping will appear as obviously now the overflow is contained within a fixed height element. I am trying to achieve the same thing but with flex because I want the height of the blue div to be driven purely by the green element and the red element's text should just be clipped. Is this even possible?

This is an example of what I want but without setting the fixed height on the red element: https://jsfiddle.net/hmudz2ky/2/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光暖心i 2025-01-31 15:49:48

您可以将元素与文本绝对设置，但其父亲戚和父母的父母是两个列网格。

第一列从隐藏的字符中获得宽度（是的，有点骇客，在伪元素上），其高度从第二个网格项目中获得。

<!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>

You could set the element with the text absolute but its parent relative and that parent's parent a two column grid.

The first column gets its width from a hidden character (yes, a bit hacky, on an after pseudo element) and its height from the second grid item.

<!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>

回复收藏 0 原文

~没有更多了~