Текст с несколькими подчеркиваниями

Question

Мое приложение состоит в том, что это какой-то онлайн-документ, который пользователь может аннотировать и подчеркивать текст для справки. Теперь это может быть сделано несколькими пользователями, поэтому для каждого подчеркивания необходимо иметь разные цвета.

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

Жесткий путь Я знаю, что я могу добавить div/span с линией и разместить ее под текстом, но может быть трудно справиться с позициями в случае отзывчивого окна.

Есть ли способ сделать это, используя только текстовые свойства? я гугл для него и нашел эту ссылку

http://fsymbols.com/generators/lines/

Они используют fsymbols для создания подчеркивания. Но я не понимаю, как добавить это в свое приложение. Также не похоже, что он может иметь разные цвета.

Любой простой способ или я должен сделать только трудный путь?

Answer 1

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

Обратите внимание, что я сохранил выделение диапазона из списка пользователей и связанных с ними цветов.

span.user { border-bottom:1px solid; display:inline-block; padding-bottom:1px; } 
 

 
span[data-uid='001'] { border-bottom-color:blue; } 
 
span[data-uid='002'] { border-bottom-color:red; } 
 
span[data-uid='003'] { border-bottom-color:orange; }

<p> 
 
Lorem ipsum dolor sit <span class="user" data-uid="003">amet, <span class="user" data-uid="001"><span class="user" data-uid="002">consectetuer</span> adipiscing elit</span>. Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="user" data-uid="001">Donec <span class="user" data-uid="003">quam</span> felis,</span> ultricies nec, pellentesque eu, pretium quis, sem. <span class="user" data-uid="003">Nulla</span> consequat massa quis enim. Nullam dictum <span class="user" data-uid="001">felis eu pede mollis pretium. </span><span class="user" data-uid="002"><span class="user" data-uid="001">Integer</span> tincidunt.</span> Cras dapibus. 
 
</p>

РЕДАКТИРОВАТЬ:

Я нашел лучшее решение, которое охватывает проблему прерывания строки, вызванные использованием "Дисплей: встроенный блок":

p { width:150px; line-height:2em; } 
 

 
span.annotation { border-bottom:1px solid; } 
 

 
span.annotation span.annotation { padding-bottom:2px; } 
 

 
span.annotation span.annotation span.annotation { padding-bottom:4px; } 
 

 
span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; } 
 

 
span[data-uid="001"] { border-color:orange; } 
 
span[data-uid="002"] { border-color:blue; } 
 
span[data-uid="003"] { border-color:red; } 
 
span[data-uid="004"] { border-color:green; }

<p> 
 
Lorem <span class="annotation" data-uid="004">ipsum dolor <span class="annotation" data-uid="001">sit amet, <span class="annotation" data-uid="002">consectetuer adipiscing</span> elit.</span> Aenean commodo ligula eget dolor. Aenean massa. <span class="annotation" data-uid="002">Cum sociis <span class="annotation" data-uid="001">natoque penatibus et <span class="annotation" data-uid="003">magnis</span> dis parturient montes, nascetur</span> ridiculus mus.</span> Donec quam felis, ultricies nec, <span class="annotation" data-uid="002">pellentesque eu, </span><span class="annotation" data-uid="001"><span class="annotation" data-uid="002">pretium</span> quis, sem.</span> Donec pede justo, fringilla vel, aliquet nec,</span> vulputate eget, arcu. 
 
</p>

Единственное, что мне не нравится, это то, что вам нужен инструкция CSS для каждого слоя вложенности (может быть проще с LESS). Однако в приложении вы должны ограничить отображение слоев аннотаций до 5 (иными словами) и найти другой способ показать, что имеется более пяти уровней аннотаций.

Answer 2

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

http://www.fileformat.info/info/unicode/char/0332/browsertest.htm

http://www.fileformat.info/info/unicode/char/0305/browsertest.htm

Я не уверен, что вы можете сделать комбинирование подчеркнуть другой цвет, чем текст, но вы можете в какой-то браузеров изменить цвет текста украшение Changing Underline color

Это не работает для меня в Chrome

.example { 
 
    text-decoration: underline; 
 
    -webkit-text-decoration-color: red; 
 
    -moz-text-decoration-color: red; 
 
    /* vendor prefix not required as of V36 */ 
 
    text-decoration-color: red; 
 
    /* color: green; */ 
 

 
}

<b class="example">text-decoration</b> <br/> 
 

 
    
 
<b style="color:red">u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲<b><br/> 
 
    
 
    
 
    
 

Answer 3

вы могли бы сделать что-то вроде этого

p { 
 
    text-decoration: underline overline line-through; 
 
    border-top: 3px solid red; 
 
    border-bottom: 3px solid green; 
 
    display: inline-block; 
 
    padding: 2px 0 0 0; 
 
    font-size: 50px; 
 
    margin: 0; 
 
}

<p>Test</p>

Answer 4

p { 
 
    font-family:tahoma; 
 
    font-size:16px; 
 
} 
 

 
span { 
 

 
    border-bottom:1px solid blue; 
 
    position:relative; 
 
    display:inline-block; 
 
    
 
} 
 
span:before { 
 
    content:''; 
 
    position:absolute; 
 
    left:0; 
 
    bottom:-3px; 
 
    border-bottom:1px solid red; 
 
    display:block; 
 
    width:100%; 
 
    
 
} 
 
span:after { 
 
    content:''; 
 
    position:absolute; 
 
    left:0; 
 
bottom:-5px; 
 
    border-bottom:1px solid green; 
 
    display:block; 
 
    width:100%; 
 
    
 
}

<p> 
 
non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span> 
 
not decorated 
 
</p>

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

Answer 5

Все ответы пока не заполнены.

Ваше главное требование:

Применение в том, что это какой-то электронный документ, к которому пользователь может Комментируйте и подчеркнуть текст для ссылки. Теперь это можно сделать с помощью нескольких пользователей, поэтому для каждого подчеркивается необходимость иметь разные цвета.

В соответствии с приведенной выше цитатой необходимо, чтобы все слова, пробелы или даже буквы сохранялись как отдельный встроенный элемент, например <span>.

Почему?

• Каждый пользователь может аннотировать текст (таким образом, каждый знак может быть выбран)
• Обратите внимание, что, когда аннотацию долго, и он рвется на другую линию, подчеркивание (границы) должны также сохранить в вертикальное положение

Это будет, безусловно, проще обрабатывать аннотации, когда каждый элемент будет отделен, особенно если вы хотите использовать отзывчивый макет.

Давайте посмотрим на примере:

• Обратите внимание, что пользователи могут сделать выбор каждого знака
• Подчеркнутой позиции быть сохранившимся (JavaScript был нужен здесь)
• Несколько уровней аннотации поддерживаются (JavaScript здесь был использован)
• Он полностью реагирует (попробуйте сжать, расширить панель предварительного просмотра скрипки в)

Fiddle: https://jsfiddle.net/00w5f0c9/1/