div內的文字不會換行

如此處所示：http://jsfiddle.net/EhnuZ/頂部組的文字較少，文字位於圖像的右側。底部組是相同的，只是它裏面有更多的文字。但是，這會導致文本在圖像下移動，而不是像我想要的那樣進行換行。這怎麼解決？我曾嘗試過：div內的文字不會換行

white-space:normal; 
word-wrap: break-word; 
width:50%; 
max-width:50%;

來源

2012-08-08 Jack S.

您需要指定文本容器width，否則它會自動嘗試是寬度的100％。

.text{ 
     vertical-align:top; 
     display:inline-block; 
     width: 30%; 
    }

來源

2012-08-08 17:02:00 Scillon

您是否試過在您的圖像上使用float：left？

來源

2012-08-08 16:58:37 Maude

是制約其母公司的一段寬度，但在打印或在一個小窗口中顯示時會導致其他問題。 – 2012-08-08 17:00:09

我能想到的最簡單的事情就是將圖片和文字放入表格中。例如： -

<table> 
     <tr> 
      <td> 
       <img src="http://i0.kym-cdn.com/entries/icons/original/000/007/263/photo_cat2.jpg"> 
      </td> 
      <td valign="top"> 
       <div class="text"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ligula ut mi laoreet viverra sit amet non dolor. Vivamus quis velit elit. Aenean dignissim porttitor lorem, ac ullamcorper quam porttitor molestie</p> 
       </div> 
      </td> 
     </tr> 
    </table>

來源

2012-08-08 17:01:47

表是不好的方法，應儘可能避免。只有幾個原因[這裏]（http://phrogz.net/css/WhyTablesAreBadForLayout.html） – Scillon 2012-08-08 17:04:40

很酷，你的解決方案絕對是可取的;我並沒有真正考慮CSS方面，特別是'display：inline-block'屬性設置......有點可以避免使用'table'。 – 2012-08-08 21:28:46

@Scillon我認爲這裏要提到的重要一點是*表格是佈局*的一種不好的方法。你的評論可能會讓新開發人員誤以爲*表不好是不好的;表格是顯示錶格數據時使用的確切工具。只是想我們應該澄清:) – dudewad 2015-03-26 23:59:30

沒有在<p>或其包含的元素中的一個的寬度，沒有理由爲瀏覽器的呈現引擎，以防止元件從膨脹以填充它的容器。

你想要做的是通過設置就可以了width或max-width

來源

2012-08-08 17:02:47 jackwanders

div內的文字不會換行

回答

相關問題