CSS - 在动态调整大小的容器中设置自动换行

Question

在我正在处理的聊天功能中，我无法正确拆分和换行长文本。下面的 HTML 是相关的嵌套元素集，但问题的症结在于 .chat__messages__item。和 .chat__messages__body (下面的整个 block 都在一个设置为 24vw 的元素内，因此它都旨在响应窗口宽度)。

首先，这是 HTML/CSS...

<style>
    .chat__messages__inner{
        display: table;
        height: 100%;
        width: 100%;       
    }

    .chat__messages__list {
        display: table-cell;
        vertical-align: bottom;
        margin: 0;
        padding: 10px 20px 0;
        list-style-type: none;
    }

    .chat__messages__item {
        position: relative;
        margin-bottom: 10px;
        padding: 8px 10px;
        background-color: #D8F2FD;
        clear: both;
    }


    <!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item -->
    .chat__messages__body {
        word-wrap: break-word;
    }
</style>

<div class='chat__messages__inner'>
    <ul class='chat__messages__list'>
        <li class='chat__messages__item'>
            <div class='chat__messages__body'>
                hereisaverylonglineoftextthatiwouldliketobreakandwrap
            </div>
        </li>
        <li class='chat__messages__item'>
            <div class='chat__messages__body'>
                here is a long sentence that will wrap and behave correctly
            </div>
        </li>
    </ul>
</div>

所需的行为是 <div>和 <li>包含文本的元素不应比文本本身更宽/更高，但这些元素也不应比它们的父元素更宽——所以对于几个词来说，它们可能有 150px 宽，但如果容器缩小到小于 150px，这些元素也将开始收缩，里面的文本将开始换行。

使用这段代码，我能够通过设置 .chat__messages__body 的样式来接近期望的结果。包括 word-wrap: break-word然后设置父级 .chat__messages__item包括 max-width: 300px (上文略)。尽管长单词会中断并换行，但它只会在我的全屏窗口上产生正确的结果——如果调整窗口大小或以小于满的状态开始，单词仍然会换行，但 div 是 300 像素宽(我试过将其设置为百分比，但这不起作用，这个词实际上会展开)。

我在上面包含的长句完全符合我的要求 - 它的父级 <div>和 <li>都是文本的大小，如果窗口缩小使得这些元素的宽度大于它们的父元素(它们都缩放到 24vw 祖先)，它们也会开始缩小并且文本换行.

用简单的英语来说，我希望长单词的容器永远不会比 100% 宽度的祖先更宽，并且它需要随窗口动态调整大小，沿途中断和换行。

我不是真正的 CSS/设计专家，这是我从别人那里继承的代码，我已经为此奋斗了太久...任何指导将不胜感激。

Answer 1

Here is a question you could check out .其中一个答案表明我会尝试什么，即使用 <wbr>创造断字机会的标签。 You can read about it here .