Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2022, 12:40
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 548

Работа с inline
А можно ли сделать так что в элементе 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>
Изображения:
Тип файла: jpg Скриншот 07-08-2022 143131.jpg (36.6 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2022, 13:29
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 548

Я вот что подумал надо как то сказать браузеру если ты умеешь понимать перенос строки то каждую новую строку оборачивай в 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
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 548

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

<!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
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 548

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Angular разработчик на удаленную постоянную работа goldi77 Работа 0 13.10.2021 07:58
Вакансия: Программист IOS, работа в офисе,г.Ростов-на-Дону Анна NikitaOnline Работа 0 21.03.2016 17:45
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 21:06