如何阻止改變容器位置的長單詞/短語？

Question

這很難說出來。如果我解釋正確，請告訴我。

但你可以在圖像「叮咬」看顯然是李標籤的一部分，但檢查時沒有突出顯示。它還創建了一條新線，可以彌補網格的對稱性。我如何讓它在一條新線上折斷並保持容器完好無損？我都試過最大高度和最大寬度，的line-height，換 -什麼都不做。

https://jsfiddle.net/fvruayno/

編輯：HTML代碼段

<ul class="categories-panels> 
    <li class="recipe-letter"> 
     <h3>M</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Almond Something</li> 
      <li>Ale Sauce</li> 
     </ul> 
    </li> 

    <li class="recipe-letter"> 
     <h3>N</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Almond Something</li> 
      <li>Ale Sauce</li> 
     </ul> 
    </li> 

    <li class="recipe-letter"> 
     <h3>O</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Almond Something</li> 
      <li>Ale Sauce</li> 
     </ul> 
    </li> 

    <li class="recipe-letter"> 
     <h3>P</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Pork Buns</li> 
      <li>Pretzel, Hershey & M&M Bites</li> 
     </ul> 
    </li> 

    <li class="recipe-letter"> 
     <h3>Q</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Almond Something</li> 
      <li>Ale Sauce</li> 
     </ul> 
    </li> 

    <li class="recipe-letter"> 
     <h3>R</h3> 
     <ul class="recipe-alphabetically"> 
      <li>Almond Something</li> 
      <li>Ale Sauce</li> 
     </ul> 
    </li> 

CSS：

#categories-panels { 
    margin: auto auto; 
    height: 1300px; 
} 

#categories-panels .recipe-letter { 
    display: inline-block; 
    word-wrap: break-word; 
    margin: 2px 0px; 
    padding: 2px; 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
} 

#categories .recipe-alphabetically { 
    padding: 0px; 
    line-height: 0px; 
} 

#categories-panels .recipe-letter li { 
    font-size: 13px; 
    padding: 0px; 
    text-indent: 0px; 
    word-wrap: break-word; 
} 

#categories-panels img { 
    width: 100px; 
} 

Answer 1

您可以添加vertical-align: top;到#categories-panels .recipe-letter選擇。