2

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

<!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 中的中间那个。是否有一个 CSS 标签我可以用来使它们增长到最小高度（高于给定的最小高度），它适合基于断词自动换行的所有文本？在我看来，我所拥有的会这样做是合乎逻辑的，但事实并非如此。

编辑：外部 Divs（大的黄色和橙色的）应该保持不同的高度，但内部 Divs 应该都是相同的高度，因为它们的最长单词都是相同的。

谢谢！

4

1 回答 1

0

删除父元素的高度和子元素的最小高度。我做了一个小提琴。我希望这就是你的意思？

.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;
}
于 2015-07-27T23:17:46.983 回答