使内容适应div的宽度

Question

我该如何让文本适应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>

当我试图显示文本时，文本会像一条直线一样溢出div。如何使用CSS将文本适应于<div class="column">的宽度（宽度=33％）？

- VeNaToR

---

你的意思是文本不换行吗？你尝试过在div的CSS中添加"word-wrap: break-word"吗？ - Ulrich Schmidt-Goertz

请注意代码已编辑。 - VeNaToR

Answer 1

word-wrap:break-word

• 将长单词换行显示。
• 调整不同的单词，使它们不会在中间断开。

因此，请尝试以下CSS：

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

JSFiddle

- Praveen

---

它工作得非常好。但它以新行开始。但我想让它位于图像的右侧，并换行。我不知道该如何实现这一点。你能告诉我吗？ - Rickyrock

Answer 2

你可以使用word-break: break-all;（假设你的意思是适应

的宽度，而不是像标题所说的高度）

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

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

- Adrift

---

单词换行不起作用。名称文本仍然显示为一条直线。我已经稍微修改了代码，请检查编辑。 - VeNaToR