2013-08-01 119 views
6

如何使文本适合div的宽度。这里是我的代码使内容适合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%)的文本。

+1

你指的是文字不环绕?你有没有试图将“word-wrap:break-word”添加到div的CSS中? –

+0

请注意编辑的代码。 – VeNaToR

回答

15

word-wrap:break-word

  • 将长单词包装到下一行。
  • 调整不同的单词,使它们不会在中间断开。

因此,尝试下面的CSS

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

JSFiddle

+0

它工作得很好。但它从新的一行开始,但我希望它的图像右侧有断词。我不知道如何做到这一点。你能告诉我吗? – Rickyrock

3

您可以使用word-break: break-all;(假设你的意思是适合的div 宽度,不喜欢你的标题高度说)

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

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

+0

单词中断不起作用,名称文本显示为一条直线我已经更改了一下代码,请检查编辑。 – VeNaToR