當超過容器最大寬度時如何調整包裝文字的寬度？ （HTML）

Question

我試圖把一些文字信息放在縮略圖上，信息框是浮動到左邊，不應超過最大寬度：85％; （縮略圖）。縮略圖區域在圖片中標記爲淺灰色，文本信息區域爲黃色。

當文本超過時，文本元素佔滿85％並且文字換行到下一行。我的問題是第一行有額外的空白，我想離開。

在我的項目中，黃色區域包含縮略圖標題，即使其中沒​​有幾個字，但有時候它只會在第一行留下很大的空白，看起來很糟糕。

有什麼辦法解決這個問題還是我要求太多？

jsFiddle demo

HTML

<div id="main"> 
<div id="text"> 
    <h3>Some text and line breaking words. Some text and line breaking words. 
     Soaaaaame text and line breaking words.<h3> 
</div> 

CSS

#main { 
width:100%; 
background-color:#ccc; 
} 

#text { 
display:inline-block; 
max-width:85%; 
background-color:yellow; 
} 

編輯：文本對齊：J-只有在有足夠的文字時，纔會使用工作。看看這個：

與裁定

WITHOUT

Answer 1

我不得不說，你問得太多。如果特定位的文本太長而不能提供空間，則會打包到下一行。有幾個選項，但可能沒有你想要的。

1. 顛倒順序。左側縮略圖，右側文字。差距仍然存在，但會向右移動，在那裏不會那麼明顯。

   例子：http://jsfiddle.net/fvdJm/4/

2. 右對齊文本。通常不是首選，因爲它可以使文本難以閱讀，但如果你只是在最大限度地查看幾行文本，它不會那麼糟糕。再一次，你仍然會有這個差距，但現在它會在左側，遠離焦點。 text-align:right;將會訣竅。

   例子：http://jsfiddle.net/fvdJm/3/

在這一天結束時，你可以讓所有想要的調整（文字大小，對齊方式，佈局），但仍然會有次，你將結束與此問題。這就是內容的本質。要做的最好的事情就是意識到它超出了你的控制範圍，繼續前進。