Форум

Сергей Ракипов · #1 (**permalink**) 07.08.2022, 12:40

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

https://ibb.co/BzD7mgm

У меня даже идей ни каких нет что нужно сказать браузеру и на что реагировать.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: 24px;
            display: inline;
            padding: 0px 20px 0px 20px;
            margin: 0px 0px 0px 0px;
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        История появления сообщества Анонимные Наркоманы в Екатеринбурге
    </div>

    <script>

    </script>
</body>
</html>

Сергей Ракипов · #2 (**permalink**) 07.08.2022, 13:29

Я вот что подумал надо как то сказать браузеру если ты умеешь понимать перенос строки то каждую новую строку оборачивай в span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: 24px;
            display: inline;
            background: #000;
            color: #fff;
        }
        span{
            padding: 0px 20px 0px 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>История появления сообщества Анонимные Наркоманы в Екатеринбурге</span>
    </div>

    <script>

    </script>
</body>
</html>

Сергей Ракипов · #3 (**permalink**) 07.08.2022, 13:43

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: 24px;
            display: inline;
            background: #000;
            color: #fff;
        }
        span{
            padding: 0px 20px 0px 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>История появления сообщества Анонимные Наркоманы в Екатеринбурге</span>
    </div>

    <script>
        let body = document.querySelector("body");
        let span = document.querySelector("span");

        line = () =>{
            console.log(span.textContent.split("\n").length)
        }
        body.addEventListener("resize", line)
    </script>
</body>
</html>

Сергей Ракипов · #4 (**permalink**) 07.08.2022, 16:25

В принципе я задачу решил с помощью css. Если кто то столкнется с такой же проблемой можно достичь такого эффекта с помощью трех теней.

Но просто любопытно. ДА или НЕТ. Может ли JS посчитать количество строк и оборачивать их в тэги.

Форум

Справочник

Discord чат

Курсы javascript