Подчеркнуть текст несколько раз разными цветами

@andyj · Регистрация: 16.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите плииииз.

Есть текст в div, его надо подчеркнуть несколько раз разными цветными линиями. (не ссылки!)

Выбрал span с бордер. Получил "замещение" одного цвета подчеркивания другим. При этом текст остается текстом и автоматически переносится.

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div style="margin: 5px; padding: 5px; border: 1px solid #8888FF;">
    --- 
    <span style="border-bottom:3px solid #FF0000;">
        r r r
    </span>
    ---
    <span style="border-bottom:3px solid #0000FF;">
        b b b
    </span>
    ---
    <span style="border-bottom:3px solid #FF0000;">
        r r r
        <span style="border-bottom:3px solid #0000FF;">
            rb rb rb
        </span>
        r r r
    </span>
    ---
</div>
<br>
 
<div style="margin: 5px; padding: 5px; border: 1px solid #8888FF; overflow-x: hidden; overflow-y: hidden;">
    <div style="float: left;">---</div>
    <div style="border-bottom:3px solid #FF0000; float: left;">
        r r r
    </div>
    <div style="float: left;">---</div>
    <div style="border-bottom:3px solid #0000FF; float: left;">
        b b b
    </div>
    <div style="float: left;">---</div>
    <div style="border-bottom:3px solid #FF0000; float: left;">
        <div style="float: left;">r r r</div>
        <div style="border-bottom:3px solid #0000FF; float: left;">
            rb rb rb
        </div>
        <div style="float: left;">r r r</div>
    </div>
    <div style="float: left;">---</div>
</div>
<br>

В идеале span бы доработать! padding/margin пробовал - либо руки кривые, либо не помогает!
Может что-нибудь еще посове

@Pepeka · 19.07.2017, 20:40

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

Может что-нибудь еще посове

Ну вот мой сове... Если правильно понял задачу - то попробуйте подчеркнуть тенью, несколько теней для текста. Единственная проблема тут - подчеркиваться будет весь блок, тень же задать можно только для блока, параграфа и т.п., а не для отдельного слова\фразы внутри текста.

@andyj · 19.07.2017, 21:11 **[ТС]**

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

попробуйте подчеркнуть тенью

Спасибо за идею, уже лучше! Но для СПАН все еще тени "заменяются"

блоки или параграфы не хочу - мне перенос при изменении размера текста терять нельзя! Просто надо "переделать текст так чтобы выглядел многократно подчеркнутым"

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<br>
<div style="margin: 5px; padding: 5px; border: 1px solid #0000FF; background: #eeeeee;">
    --- 
    <span style="border-bottom:3px solid #FF0000;">
        r r r
    </span>
    ---
    <span style="border-bottom:3px solid #0000FF;">
        b b b
    </span>
    ---
    <span style="border-bottom:3px solid #FF0000; ">
        r r r
        <span style="border-bottom:3px solid #FF0000; box-shadow: 0px 3px 0px #4444FF;">
            rb rb rb
        </span>
        r r r
    </span>
    ---
    <span style="border-bottom:3px solid #FF0000; ">
        r r r
        <span style="border-bottom:3px solid #FF0000; box-shadow: 0px 3px 0px #4444FF;">
            rb rb rb
        </span>
        <span style="border-bottom:3px solid #FFFFFF; box-shadow: 0px 3px 0px #4444FF;">
            b b b
        </span>
    </span>
    ---
</div>
<br>

Но повторив красный низ и добавив синюю тень получил уже 2 линии. Но хотелось бы не ограничивать себя 2мя! Может можно как-нибудь СПАНы безопасно вкладывать один в другой без замещения стилей?

p.s. "подчеркивать" буду функциями js по сложной математике, и у одного слова может быть несколько цветов "с наложением" (в идеале до 5ти - выше "читабельность" упадет)

@Pepeka · 19.07.2017, 21:38

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

Но хотелось бы не ограничивать себя 2мя!

А и правильно, не ограничивайте! ))
Теней можете задать сколько угодно, через запятую )

Добавлено через 9 минут

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

получил уже 2 линии

Вот 3 линии снизу, по 4 пихеля каждая, например:

CSS
1
box-shadow:0px 4px red, 0px 8px green, 0px 12px blue;

Добавлено через 1 минуту
И вообще забейте на border-bottom, раз несколько линий надо

Добавлено через 9 минут
И не забывайте, что есть еще "text-shadow", может он лучше подойдет? Также несколько теней можно задать, через запятую же.

Добавлено через 2 минуты
Только что у

CSS
1
box-shadow

есть еще 4й параметр - растяжение тени, а у

CSS
1
text-shadow

такового нет. А иногда и растяжение это нужно кровь из носу ))

@andyj · 19.07.2017, 22:02 **[ТС]**

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

Вот 3 линии снизу, по 4 пихеля каждая, например:

Спасибо! Я уже нашел... сейчас экспериментирую с box-shadow (вроде целиком получилось) и просчитываю как подобное можно в js реализовать!

На 7ми 3хпиксельных линиях получил наложение линий на следующую строку - пришлось раздвигать строки через line-height: 30px; А еще если строка последняя, то многострочная тень выходит ниже нижнего бортика внешнего дива - приходится добавлять padding-bottom: 18px; во внешний див.

никогда не игрался с тенями -
1) они одинаково работают во всех современных браузерах?
2) Можно ли сделать "прозрачный" "слой тени"? Бывают ситуации когда в "aaabbbccc" aaa одна 1я-красная, bbb -1я красная, 2я синяя, а в ccc 1я "прозрачная", а 2я продолжается синяя. Я сейчас "прозрачную" рисую цвета фона, но если фоном будет картинка, это будет заметно.

@Pepeka · 20.07.2017, 05:38

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

они одинаково работают во всех современных браузерах?

Ну... По идее да, особенно если браузер обновлен такой до последней версии.
Собсно есть такая конструкция:

CSS
1
2
3
4
5
6
-khtml-box-shadow: 0px 0px 5px #808080;
-webkit-box-shadow:0px 0px 5px #808080;
   -moz-box-shadow:0px 0px 5px #808080;
    -ms-box-shadow:0px 0px 5px #808080;
     -o-box-shadow:0px 0px 5px #808080;
       box-shadow: 0px 0px 5px #808080;

Как бэ эдакий костылик для всех браузеров, хотя по идее последняя строка всеми браузерами современными должна восприниматься.

Прозрачный слой тени - делайте...Не совсем понял подзадачу, но в том же rgba укажите степень прозрачности, всегда пожалуйста:

CSS
1
box-shadow: 0px 2px 3px rgba(255,255,255,0);

где крайний "0" и есть полная прозрачность, если же "1" поставить - полная непрозрачность.

@andyj · 20.07.2017, 05:48 **[ТС]**

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

Не совсем понял подзадачу, но в том же rgba укажите степень прозрачности,

Уже проверил. Работает не так как надо - следующая тень/линия в 2 раза толще получается вместо заднего фона. Ладно... это не горящее.

Попробуйте запустить это (из ранних образцов, без теней, но наглядно):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример</title>
    </head>
    <body>
        <br>
        <div style="margin: 5px; padding: 5px; border: 1px solid #0000FF; background: #eeeeee;">
            --- 
            <span style="border-bottom:3px solid #FF0000;">
                r r r
            </span>
            ---
            <span style="border-bottom:3px solid #0000FF;">
                b b b
            </span>
            ---
            <span style="border-bottom:3px solid #FF0000; ">
                r r r
                <span style="border-bottom:3px solid #FF0000; box-shadow: 0px 3px 0px #4444FF;">
                    rb rb rb
                </span>
                r r r
            </span>
            ---
            <span style="border-bottom:3px solid #FF0000; ">
                r r r
                <span style="border-bottom:3px solid #FF0000; box-shadow: 0px 3px 0px #4444FF;">
                    rb rb rb
                </span>
                <span style="border-bottom:3px solid #FFFFFF; box-shadow: 0px 3px 0px #4444FF;">
                    b b b
                </span>
            </span>
            ---
        </div>
        <br>
    </body>
</html>

(лень куда-нибудь выкладывать, а на css-опенсорсы не умею)
там на сером фоне специально белым кусочек оставил. (единственное #FFFFFF - последнее bbb синяя, но уже не красная). Могу покрасить серым, тогда сливается, но если фоном сделать цветной рисунок с линиями/орнаментом, то придется "подбирать" фон.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Подчеркнуть текст несколько раз разными цветами

Решение