Make content fit to the width of the div

Question

How can I make a text fit to the width of div. Here is my code

<div class="column">
    <a href="#" class="user_thumbnail">
        <img src="<?=base_url()?>/images/1.jpg" width="100px" height="100px">

    </a>
    <span class="name">texttexttexttexttexttexttexttexttexttext</span>
</div>

When I have tried to display the text, the text overflows out of the div like a straight line. How can i do css to fit the text to the width of <div class="column"> (width = 33%).

Answer 1

word-wrap:break-word

• Wrap long words onto the next line.
• Adjust different words so that they do not break in the middle.

So try the below CSS

.column {
    width: 33%;
    word-wrap: break-word;
}

JSFiddle

Answer 2

You can use word-break: break-all; (assuming you meant fit the width of the div, not the height like your title says)

.column {
    width: 33%;
    word-break: break-all;
}

http://jsfiddle.net/VbTes/1/