如何实现多行段落元素动态横向收缩以去除多余空白？

问题描述 #

在构建SMS对话链展示时，短文本消息气泡能通过display: inline-block和width: fit-content收缩到合适宽度，但多行文本气泡会直接占满设置的max-width（父容器的75%）——哪怕换行后还有剩余空间，气泡右侧也会留着多余空白。需要实现多行段落横向动态收缩，把这些空白去掉。

原实现代码 #

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
    background-color: black;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
}

section {
    margin: 0 auto;
    background-color: white;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

article {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    width: fit-content;
    max-width: 75%;
}

article p {
    margin: 0;
    word-wrap: break-word;
}

article.them {
    color: black;
    background-color: lightgray;
    align-self: flex-start;
}

article.me {
    color: white;
    background-color: darkblue;
    align-self: flex-end;
}

/* Smaller margin between consecutive messages from the same sender */
article.me + article.me,
article.them + article.them {
    margin-top: 3px;
}

/* Standard margin between different senders */
article.me + article.them,
article.them + article.me {
    margin-top: 20px;
}

HTML

<body>
    <section>
        <article class="them">
            <p>Lorem ipsum, dolor sit amet.</p>
        </article>
        <article class="me">
            <p>Lorem ipsum.</p>
        </article>
        <article class="me">
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Nostrum tempore excepturi dolore nam? Odio architecto
                tempora maiores corrupti nihil autem necessitatibus natus
                consequuntur adipisci hic nisi quaerat voluptate, incidunt
                beatae?
            </p>
        </article>
        <article class="them">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Repellat officia delectus sequi quo quas!
            </p>
        </article>
    </section>
</body>

解决方案 #

通过调整容器和段落的CSS属性，让气泡宽度完全贴合多行文本的实际宽度：

修改后的CSS #

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
    background-color: black;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
}

section {
    margin: 0 auto;
    background-color: white;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

article {
    padding: 10px 20px;
    border-radius: 30px;
    max-width: 75%;
    align-self: flex-start;
    /* 关键：用inline-flex让容器宽度跟随内容 */
    display: inline-flex;
}

article p {
    margin: 0;
    word-wrap: break-word;
    /* 关键：让段落收缩到文本实际需要的宽度，同时限制最大宽度不超过容器 */
    width: fit-content;
    max-width: 100%;
}

article.them {
    color: black;
    background-color: lightgray;
}

article.me {
    color: white;
    background-color: darkblue;
    align-self: flex-end;
}

/* Smaller margin between consecutive messages from the same sender */
article.me + article.me,
article.them + article.them {
    margin-top: 3px;
}

/* Standard margin between different senders */
article.me + article.them,
article.them + article.me {
    margin-top: 20px;
}

调整说明 #

• 把article的display从inline-block换成inline-flex，这样气泡容器的宽度会完全由内部文本决定，不会盲目占满允许的最大宽度。
• 给p标签设置width: fit-content，强制段落只占据文本实际需要的宽度，同时保留max-width: 100%，确保文本超过气泡上限时自动换行，不会撑破气泡样式。
• 移除article上的width: fit-content，因为inline-flex已经能实现自适应宽度的效果，重复设置反而可能冲突。

内容的提问来源于stack exchange，提问作者YangTegap