2013-08-01 172 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