Javascript-форум - Как удалить пустое пространство в текстовых блоках?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как удалить пустое пространство в текстовых блоках? (https://javascript.ru/forum/misc/85147-kak-udalit-pustoe-prostranstvo-v-tekstovykh-blokakh.html)

Как удалить пустое пространство в текстовых блоках?

Есть текстовые блоки c фоновой заливкой. При переносе строк сбоку внутри блока образуются пустые пространства [не отступы!]. Как их убрать?

Был произведен поиск соответствующих css-свойств. Нечто похожее на достижение цели было width: min-content — но в таком случае все блоки сжимаются до минимальной ширины.

Мои предположения решения:

Актуально как бы вычислить видимую ширину текста и задать ее для каждого блока. Получается что у каждого текстового блока будет своя ширина.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Text Trim</title>
<style>
    .container {
        display: block;
        width: 100%;
        float: left
    }
    .text {
        font-size: 17px;
        line-heigth: 20px;
        color: #fff;
        background-color: blue;
        max-width: 188px;
        display: inline-block;
        margin-bottom: 1px;
        float: right;
    }
</style>
</head>

<body>

    <div class="container">
        <div class="text">
            Quisque malesuada placerat nisl. Nulla consequat massa quis enim!
        </div>
    </div>

    <div class="container">
        <div class="text">
            Placerat nisl. Nulla consequat Wo.
        </div>
    </div>

    <div class="container">
        <div class="text">
            Hi
        </div>
    </div>

    <div class="container">
        <div class="text">
            Normal space
        </div>
    </div>

</body>
</html>

Что скажете? Какие есть идеи?)

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

Надеюсь оно всё таки найдется с помощью CSS или JS :)

Цитата:

Сообщение от webgraph

Как их убрать?

Всему виной

Цитата:

Сообщение от webgraph

display: inline-block;

Как с этим жить - есть целая статья, в которой пытаются убрать такие отступы...
https://habr.com/ru/articles/137582/

Цитата:

Сообщение от webgraph

Какие есть идеи?)

Для этого нужно знать что именно ты хочешь реализовать...

Цитата:

Сообщение от ksa (Сообщение 551590)

Для этого нужно знать что именно ты хочешь реализовать...

Ты прочитал/а что было мной написано? Я не про загадочные отступы. Вообще не про отступы. А про пустое пространство, которое образуется из-за переноса текста на новую строку.

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

text-align:justify;
?
Или надо, что бы не переносилось?

Цитата:

Сообщение от voraa (Сообщение 551592)

text-align:justify;
?
Или надо, что бы не переносилось?

text-align: justify — он растягивает и увеличивает расстояние между словами.

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

Если самому расставлять переносы (<br />) - табличка может "убирать" или "обтекать" текст...

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Text Trim</title>
<style>
    .container {
        display: block;
        width: 100%;
        float: left
    }
    .text {
        font-size: 17px;
        line-heigth: 20px;
        color: #fff;
        background-color: blue;
        max-width: 188px;
        margin-bottom: 1px;
        float: right;
    }
</style>
</head>

<body>

    <div class="container">
        <table class="text">
            <td>Quisque malesuada<br />placerat nisl. Nulla<br />consequat massa quis<br />enim!</td>
        </table>
    </div>

</body>
</html>

В тему было добавлено изображение для наглядности.

Цитата:

Сообщение от webgraph

В тему было добавлено изображение для наглядности.

Уменьшить бы картинку... Сильно "растягивает" контент. :(