在这个基础上限制每一行的只显示四个

单词，如果超过四个单词则自动换行。

代码示例：

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 23%;
        margin-bottom: 20px;
    }
    .item p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<div class="container">
    <div class="item">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="item">
        <p>Consectetur adipiscing elit</p>
    </div>
    <div class="item">
        <p>Sed do eiusmod tempor incididunt</p>
    </div>
    <div class="item">
        <p>Ut labore et dolore magna aliqua</p>
    </div>
    <div class="item">
        <p>Ut enim ad minim veniam</p>
    </div>
    <div class="item">
        <p>Quis nostrud exercitation ullamco laboris</p>
    </div>
    <div class="item">
        <p>Nisi ut aliquip ex ea commodo consequat</p>
    </div>
    <div class="item">
        <p>Duis aute irure dolor in reprehenderit</p>
    </div>
</div>

在这个示例中，我们使用了 Flexbox 布局来实现每一行显示四个单词的效果。我们将容器设置为 `display: flex`，并使用 `flex-wrap: wrap` 让子元素自动换行。我们还使用了 `justify-content: space-between` 让每一行的子元素在水平方向上均匀分布。

对于每一个单词，我们使用了 `white-space: nowrap` 让其不换行，然后用 `text-overflow: ellipsis` 和 `overflow: hidden` 来隐藏超出部分。这样就可以保证每一个单词都在同一行上显示，如果超过四个单词则自动换行。