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

Question

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

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

Есть ли способ для этого?

p {
  text-decoration: underline;
  word-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

Редактировать:

Я нашел этот трюк, который почти подходит для моего случая использования:

p {
  text-decoration-line: underline;
}
span:after {
  content: ' ';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

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

p {
  text-decoration-line: underline;
}
span:after {
  content: '\200B';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

4

html css google-chrome word-spacing

Источник

user1967800 26 авг '18 в 14:43

2 ответа

Решение

В поисках правильного обходного пути...

Быстрый способ решения проблемы в Chrome - заменить пробелы на  , но это будет работать только для одной строки текста. Если текст не помещается в одну строку, он переполняет родительский элемент вместо разбиения на несколько строк:

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;<span>test</span>
</p>

<p>
  <span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>
</p>

Еще один обходной путь для этого заключается в добавлении пространства микширования с нулевой шириной:  , но вы можете видеть, что подчеркивание теперь продолжается до или после текста из-за   также отображается и подчеркивается:

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>
</p>

<p>
  <span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>
</p>

✨ Space + Zero-Width Space для спасения

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

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&#8203; <span>test</span>
</p>

<p>
  <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>
</p>

Использование дополнительных элементов HTML для получения дополнительных параметров настройки / стиля подчеркивания

Другой вариант - использовать элемент обтекания, чтобы создать подчеркивание, используя border или box-shadow, что также позволит вам иметь некоторые дополнительные параметры настройки / стиля, как вы можете видеть в этих примерах:

p {
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
  float: left;
  box-sizing: border-box;
}

p:nth-child(3n) {
  border: none;
}

.fakeUnderline1 {
  border-bottom: 2px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline1:hover {
  border-bottom-color: cyan;
}

.fakeUnderline2 {
  border-bottom: 1px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline2:hover {
  border-bottom-width: 3px;
}

.fakeUnderline3 {
  box-shadow: inset 0 -2px 0 0 yellow;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline3:hover {
  box-shadow: inset 0 -16px 0 0 yellow;
}

.fakeUnderline4 {
  overflow: hidden;
  box-shadow: 0 2px 2px -3px red;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline4:hover {
  box-shadow: 0 5px 5px -5px red;
}

.fakeUnderline5 {
  border-bottom: 1px dotted black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline5:hover {
  border-bottom-style: solid;
}

.fakeUnderline6 {
  border-bottom: 2px solid blue;
  box-shadow: inset 0 -2px 0 0 red;
}

.fakeUnderline6:hover {
  border-bottom-color: red;
  box-shadow: inset 0 -2px 0 0 blue;
}

.fakeUnderline7 {
  text-decoration: underline;
}

<p>
  <span class="fakeUnderline1">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline2">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline3">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline4">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline5">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline6">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

Несмотря на то, что речь идет не о стилизации подчеркивания, обратите внимание, что если вам нужны только некоторые базовые параметры стили подчеркивания и поддержка браузера не является проблемой, вы можете использовать эти свойства вместо решения, описанного выше:

text-decoration-color
text-decoration-line
text-decoration-style
text-underline-position

Более сложное поведение будет доступно после поддержки этих экспериментальных функций:

text-decoration-skip
text-decoration-skip-ink

1

Источник

user3723993 26 авг '18 в 15:17

Другие вопросы по тегам html css google-chrome word-spacing

user8620333 26 авг '18 в 15:04 2018-08-26 15:04 · Accepted Answer · 2018-08-26 15:04

Обходной путь - удалить пустое пространство между пролетами и использовать хак с псевдоэлементом для симуляции word-spacing, Это работает, но остается хакерским решением:

p {
  text-decoration: underline;
  word-spacing: 1em;
  display:flex; /*remove white space*/
}

span:not(:last-child)::after {
  content:"\00a0";
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

Если у вас будут только пролеты, вы можете сделать это так:

p {
  text-decoration: underline;
}

span:not(:last-child)::after {
  content:" ";
  letter-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>