CODEWITHSUNDEEP
htmlcss
sravis
sravis

Reputation: 3680

HTML auto height for no space content

I have 2 div tags in HTML with same class ".block"

Problem:

div will auto adjust its height only if the content within it have space or break in it. Else div will not auto adjust its height when we have running text without any space or break.

How do we give auto height with HTML and CSS in this scenario with out using any client side programming.

Preview: 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; }

Upvotes: 0

Views: 75

Answers (1)

j08691
j08691

Reputation: 207901

Add CSS word-wrap:break-word; to .block:

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

jsFiddle example

Upvotes: 3

Related Questions