Html 使内容适合 div 的宽度

Make content fit to the width of the div

提问by VeNaToR

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

如何使文本适合 div 的宽度。这是我的代码

<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%).

当我试图显示文本时，文本像一条直线一样从 div 中溢出。我如何做 css 以适应文本的宽度<div class="column">（宽度 = 33%）。

回答by Praveen

word-wrap:break-word

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

所以试试下面的 CSS

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

JSFiddle

JSFiddle

回答by adrift

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

您可以使用word-break: break-all;（假设您的意思是适合div的宽度，而不是您标题所说的高度）

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

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

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