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

Ответ 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>

Ответ 2

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

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>

Ответ 3

Кажется, они просто используют ̅c̅o̅m̅b̅i ̅̅̅̅ ni ̅̅̅ ng overline и underlin ̲̲̲̲̲ e

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

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

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

Это не работает для меня в 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/>
  
  
  
  

Ответ 4

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

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

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

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

Почему?

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

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

Посмотрим на пример:

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

Скрипка: https://jsfiddle.net/00w5f0c9/1/

Ответ 5

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>