gpt4 book ai didi

html - 是否可以使用CSS获取垂直文本以将设置宽度填充到包含文本的最小高度的文本框?

转载 作者:行者123 更新时间:2023-11-28 03:08:14 25 4
gpt4 key购买 nike

这是显示问题的代码片段:

<!Doctype html>
<html>
<head>
<style>
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
min-height:200px;
width:100px;
}
</style>
</head>
<body>
<div style="background-color:yellow; height:500px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:orange; height:600px; width:200px; float:left;">
<div class="writingMode">
pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:yellow; height:700px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
</body>
</html>

我希望所有内部 div 的高度都相同,由其中最长的单词决定。取而代之的是,除了 Chrome 中的中间那个之外,他们正在长到 parent 的高度。是否有我可以使用的 CSS 标签使它们增长到适合所有基于断词换行的文本的最小高度(高于给定的最小高度)?对我来说,我所拥有的会那样做似乎合乎逻辑,但事实并非如此。

编辑:外层的 Div(大黄色和橙色的)应该保持不同的高度,但是内层的 Div 应该保持相同的高度,因为它们最长的单词都是一样的。

谢谢!

最佳答案

移除父元素的高度和子元素的最小高度。我做了一个 fiddle 。希望this你是什​​么意思?

.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
width:100px;
}

关于html - 是否可以使用CSS获取垂直文本以将设置宽度填充到包含文本的最小高度的文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31664338/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com