如何使多行段落元素动态水平收缩以删除空格？

问题描述 投票：0回答：1

让我解释一下...我正在用 html 构建 SMS 链的表示。这是我得到的：

@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;
}
<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>

当文本气泡只有几个单词时，它会缩小到适当的宽度。这是因为文章设置为同时使用 

display: inline-block;
和 
width: fit-content;
缩小到内容的宽度。但对于多行文本气泡，气泡将始终是最大宽度（部分宽度的 75%）。这是因为该段落将占据允许的全部宽度，尽管为了将单词保持在一起而提前断线。这会在多行文本气泡的右侧留下一些空白，具体取决于屏幕宽度。我希望段落元素横向收缩以删除换行符留下的多余空白。知道 CSS 是否可以做到这一点吗？

html css line-breaks paragraph
1个回答
0
投票

用于使多行段落元素动态水平收缩以删除空白？

对article

类使用
inline-block允许文本根据其内容缩小，并确保文本不超过实际宽度。

使用 

max-width
限制水平扩展，但如果它强制不必要的垂直扩展，请避免使用 
pre-wrap
。

确保不使用

white-space: 'nowrap'
，除非您想要单线气泡。

这是我这边工作的输出图像：

like this

调整后的代码如下：

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&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: auto;
            max-width: 75%;
            word-wrap: break-word;
        }

        article p {
            margin: 0;
            display: inline;
            white-space: normal;
        }

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

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

        article.me+article.me,
        article.them+article.them {
            margin-top: 3px;
        }

        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>

此代码应根据内容水平缩小文本气泡。气泡仅在需要时才会包裹，并且不会超过最大宽度的75%。

希望这对您有用，如果您有任何其他问题，请告诉我，谢谢。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.