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)

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


Есть текстовые блоки 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>



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

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

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

ksa 21.04.2023 12:27
Цитата:
Сообщение от webgraph
Как их убрать?
Всему виной
Цитата:
Сообщение от webgraph 
display: inline-block;
Как с этим жить - есть целая статья, в которой пытаются убрать такие отступы...
https://habr.com/ru/articles/137582/

ksa 21.04.2023 12:28
Цитата:
Сообщение от webgraph
Какие есть идеи?)
Для этого нужно знать что именно ты хочешь реализовать...

webgraph 21.04.2023 12:32
Цитата:
Сообщение от ksa (Сообщение 551590)
Для этого нужно знать что именно ты хочешь реализовать...
Ты прочитал/а что было мной написано? Я не про загадочные отступы. Вообще не про отступы. А про пустое пространство, которое образуется из-за переноса текста на новую строку.

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

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

webgraph 21.04.2023 12:48
Цитата:
Сообщение от voraa (Сообщение 551592)
text-align:justify;
?
Или надо, что бы не переносилось?
text-align: justify — он растягивает и увеличивает расстояние между словами.

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

ksa 21.04.2023 12:55
Если самому расставлять переносы (<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 21.04.2023 12:55
В тему было добавлено изображение для наглядности.

ksa 21.04.2023 12:57
Цитата:
Сообщение от webgraph
В тему было добавлено изображение для наглядности.
Уменьшить бы картинку... Сильно "растягивает" контент. :(

webgraph 21.04.2023 12:59
Цитата:
Сообщение от ksa (Сообщение 551594)
Если самому расставлять переносы (<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>
Что ты за прЕколист? Это должно происходить автоматически.

voraa 21.04.2023 13:01
Вряд ли получится.
Там алгоритмы рендеринга такие.
Сначала впихивается текст и блок расширяется до максимально возможного, потом уже с учетом этой ширины делаются переносы. Но ширина остается той, что высчитали вначале.

ksa 21.04.2023 13:03
webgraph, если расстановка переносов не выход - можно использовать "обратное" действо - расстановка непереносимых пробелов! :)

<!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;
		width: min-content;
        display: inline-block;
        margin-bottom: 1px;
        float: right;
    }
</style>
</head>

<body>

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

</body>
</html>

ksa 21.04.2023 13:04
Цитата:
Сообщение от webgraph
Это должно происходить автоматически.
Тогда вынужден тебя расстроить... "Голым" css такое вряд ли сотворить. :(

webgraph 21.04.2023 13:07
Цитата:
Сообщение от ksa (Сообщение 551601)
Тогда вынужден тебя расстроить... "Голым" css такое вряд ли сотворить. :(
Именно поэтому мной и было написано сюда, для реализации на JS)) чистом JS.

Просто вдруг кто-то знает что есть возможность на CSS. Но видимо на CSS её реально нет...


Часовой пояс GMT +3, время: 09:34.