文字不包裹在p標籤

Question

我有兩個浮動的div，並排放置，裏面有p標籤。在p標籤中的文本不換，只是溢出的容器，你可以在文本中看到的圖像下：

我的HTML看起來像這樣：

 <div class="submenu"> 
      <h3>Destinations in Europe</h3> 
      <ul> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
      </ul> 
      <h3>Features</h3> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-one.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl 
       </p> 
      </div> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-two.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl 
       </p> 
      </div>   
     </div> 

我的CSS ：

#rb-menu-com li .submenu > div { 
    width:48%; 
    float:left; 
    position: relative; 
} 

#rb-menu-com li .submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; 
} 

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
} 

有沒有人遇到過這個？我沒有！讓我生氣！

Answer 1

自動換行只有當一個詞出現中斷。

如果你有一個「字」，即只要知道，那麼有沒有地方爲它打破。

的妥善解決是寫實際內容和人物並非無稽之談字符串。如果您使用的是用戶生成的內容，那麼請添加對特殊長詞的檢查，並禁止它們（或者在保留整個鏈接的同時刪除其中的一部分URL）。

或者，您可以使用word-break CSS property告訴瀏覽器來換行中的單詞中間。

p { word-break: break-all } 

（注意browser support）。

或者，您可以使用overflow截斷文本，如果它不會在容器適合。

Answer 2

將float：left屬性添加到圖像。

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
    float:left; 
} 

Answer 3

將此樣式設置爲<p>標籤。

p { 
    word-break: break-all; 
    white-space: normal; 
} 

Answer 4

這是因爲你有連續的文本，意味着沒有空格的單個長單詞。爲了打破它添加word-break: break-all;

.submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; word-break: break-all; background:red 
} 

DEMO

Answer 5

這不是一個問題的答案，但我找到了這個網頁，同時尋找一個答案，我有一個問題，我想提一提，我發現，因爲它花了我很多時間的解決方案。希望這對其他人有用：

問題在於<p>標記中的文本不會在div中摺疊。最後，我打開檢查員，注意到所有單詞之間都有一個'沒有突破的空間實體'。我的編輯器vi只是顯示正常的空格（一些不可見的字符，我不知道是什麼），但是我已經複製粘貼來自PDF文檔的文本。解決方法是從vi中複製一個空白空間，並用空格替換它。即。 ：％s///g其中要替換的空白是從違規文本中複製的。問題解決了。

Answer 6

您可以使用自動換行斷詞或字符的連續字符串，如果它不適合於容器中的線。

word-wrap: break-word; 

這樣會在適當的中斷點保持斷行，除非單個字符串不符合一行，在這種情況下它會中斷。

JSFiddle

Answer 7

要有人還在掙扎，一定要檢查，看你是否已經設置上有問題的字體的行高價值：它可能是壓倒一切的自動換行。

Answer 8

EASY

p{ 
    word-wrap: break-word; 
}