Question

我在查找长行文本时遇到问题，无法正确破解和包装我正在处理的聊天功能。下面的HTML是相关的嵌套元素集，但饼干的关键是.chat__messages__item和.chat__messages__body（下面的整个块位于设置为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设置为包含{{1}来接近所需结果（上面省略）。虽然长字会破坏和换行，但它只会在我的全屏窗口上产生正确的结果 - 如果窗口调整大小或以小于满的方式开始，这个单词仍然会换行，但div是300px宽（我试过了）将其设置为百分比，但这不起作用，这个词实际上是解开的。）

我上面包含的长句完全符合我的要求 - 它的父max-width: 300px和<div>都是文本的大小，如果窗口收缩，那么这些元素的宽度会比他们的父母更大（它们都扩展到<li>祖先），它们也会开始缩小，文本会包含在空格上。

用简单的英语，我希望长字的容器永远不会比100％宽度的祖先宽，并且它需要动态调整窗口大小，打破并包裹在路上。

我不是一个真正的CSS /设计专家，这是我从其他人那里继承的代码，而且我已经用这个问题太久了......任何指导都会非常感激。< / p>

Answer 1

Here is a question you could check out。其中一个答案表明我会尝试，即使用<wbr>标签创建一个分词机会。 You can read about it here

Answer 2

好的，原来要做的是将.chat__messages__inner和.chat__messages__list设置为display: inline-block width: 100%，.chat__messages__item需要max-width: 100% }}

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

2 个答案: