I think word-break
, with which you can specify if you want to break line within a word, will do the trick:
.column { word-break:break-all; }
You can read more about the word-break
property here.
Question
I have a div including three inner divs which are all floated left. This floats should represent three columns. So far, everthing's ok.
But if I add headlines inside each of the inner divs and the headlines are to wide, the headlines will overlap.
An image will show it better than 1000 words:
(Sorry for external link. But due to I am new here I have not enough reputation points to post images :) )
My html code looks like this:
<div id="content_container" class="appearance">
<div class="column">
<h1>My headline1111111111111</h1>
text
</div>
<div class="column">
<h1>My headline2222222222</h1>
text
</div>
<div class="column">
<h1>My headline333333333333333333333</h1>
text
</div>
<div style="clear: left;"></div>
</div>
And here is my css code:
#content_container {
position: relative;
}
.column {
float: left;
width: 33.33333%;
padding-right: 10px;
}
.appearance {
margin: 0 auto;
width: 60%;
}
The content_container on the other hand is also an inner div of another wrapper container. Don't know whether it matter in this case.
Any ideas what I could do, to fix it?
Solution
I think word-break
, with which you can specify if you want to break line within a word, will do the trick:
.column { word-break:break-all; }
You can read more about the word-break
property here.
OTHER TIPS
You can use
.column { overflow: hidden; }
to truncate the header or
.column { overflow-x: scroll; }
to make it scrollable.