Форум

webgraph · #11 (**permalink**) 21.04.2023, 12:59

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

Если самому расставлять переносы (<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 · #12 (**permalink**) 21.04.2023, 13:01

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

ksa · #13 (**permalink**) 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 · #14 (**permalink**) 21.04.2023, 13:04

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

Это должно происходить автоматически.

Тогда вынужден тебя расстроить... "Голым" css такое вряд ли сотворить.

webgraph · #15 (**permalink**) 21.04.2023, 13:07

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

Тогда вынужден тебя расстроить... "Голым" css такое вряд ли сотворить.

Именно поэтому мной и было написано сюда, для реализации на JS)) чистом JS.

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

Форум

Справочник

Discord чат

Курсы javascript