如何阻止长单词/短语改变容器的位置？

Question

很难说出来。如果我解释正确，请告诉我。

但正如您在图片中看到的那样，“Bites”显然是 li 标签的一部分，但在检查时不会突出显示。它还创建了一条新的线条，它会弄乱网格的对称性。如何让它在新线上断开并保持容器完整？我试过 max-height 和 max-Width ， line-height ，自动换行什么都不做

https://jsfiddle.net/fvruayno/

编辑：HTML代码段

s.setColor(s.getColor())

CSS：

    <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>

Answer 1

您可以将vertical-align: top;添加到#categories-panels .recipe-letter选择器。