Как сделать так, чтобы многорядный параграф динамически сжимался по горизонтали, устраняя пробелы?

Содержание

Вопрос или проблема
Ответ или решение
Пример HTML для проверки:

Вопрос или проблема

Позвольте объяснить… Я создаю представление SMS-чата в HTML. Вот что у меня есть:

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

/* Меньший отступ между последовательными сообщениями от одного отправителя */
article.me + article.me,
article.them + article.them {
    margin-top: 3px;
}

/* Стандартный отступ между разными отправителями */
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>

Когда текстовый пузырь содержит всего несколько слов, он сжимается до соответствующей ширины. Это происходит потому, что элемент article настроен на сжатие до ширины содержимого с помощью display: inline-block; и width: fit-content;. Но с многопоточными текстовыми пузырями пузырь всегда будет иметь максимальную ширину (75% ширины секции). Это связано с тем, что параграф занимает всю допустимую ширину, несмотря на то, что строка обрывается раньше, чтобы сохранить слова вместе. Это оставляет немного пустого места справа от многопоточных текстовых пузырей, в зависимости от ширины вашего экрана. Я хочу, чтобы элемент параграфа сжимался по ширине, чтобы убрать избыточное пустое пространство, оставшееся после переноса строки. Есть идеи, возможно ли это сделать с помощью CSS?

Ответ или решение

Для того чтобы динамически уменьшить ширину многострочного элемента параграфа и устранить белое пространство, которое остается справа после разбиения строк, необходимо внести несколько изменений в ваш CSS-код. Основная проблема заключается в том, что paragraph по умолчанию занимает всю доступную ширину, из-за чего происходит возникновение лишнего пространства.

Вот несколько рекомендаций, которые могут помочь вам решить эту проблему:

Удаление свойства max-width: Убедитесь, что свойство max-width не применимо напрямую к вашему article. Это позволит вашему элементу принимать ширину в зависимости от содержимого.
Использование свойства display: inline-flex: Вместо display: inline-block; используйте display: inline-flex;, что позволит элементу изменять ширину в зависимости от его содержимого и при этом сохранять возможность использовать флекс-контейнер для размещения вложенных элементов.
Настройка width: Установите width: auto;, чтобы элемент мог адаптироваться к размерам содержимого.
Настройка flex для paragraph: Настройте стиль для p внутри article, сохранив обёртку с управлением отступами и пробелами.

Вот изменённый код CSS:

article {
    display: inline-flex; /* Изменено на inline-flex */
    padding: 10px 20px;
    border-radius: 30px;
    width: auto; /* Установлено на auto */
    /* max-width убрано */
}

article p {
    margin: 0;
    word-wrap: break-word;
    max-width: 100%; /* Ограничиваем ширину текста */
}

Таким образом, при многострочном содержимом элемент будет автоматически подстраиваться под ширину текста без создания избыточного пробела справа.

Пример 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>

После внесения указанных изменений ваши текстовые сообщения должны правильно адаптироваться к содержимому, что устранит белые пробелы справа от многострочных текстовых блоков.