Question

我在HTML中有2个div标签，同一个类＆＃34; .block＆＃34;

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

没有空间内容的HTML自动高度

1 个答案: