无空格内容的 HTML 自动高度

Question

我在 HTML 中有 2 个具有相同类“.block”的 div 标签

Problem:

div 仅当其中的内容有空格或中断时才会自动调整其高度。否则当我们运行没有任何空格或中断的文本时，div 将不会自动调整其高度。

在这种情况下，我们如何在不使用任何客户端编程的情况下使用 HTML 和 CSS 提供自动高度。

预览:http://jsfiddle.net/n8c12uut/

HTML:

<div id="blockContainer">
    <div class="block">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</div>        
    <div class="block">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>        
</div>

CSS:

#blockContainer { background-color: #e5fef5; padding: 10px; }
.block { background-color: #fff; padding: 10px; margin-top: 10px; border: 1px solid #ccc; overflow: hidden; }

Answer 1

添加 CSS word-wrap:break-word; 到 .block:

.block {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
    word-wrap:break-word;
}

jsFiddle example