Подчеркнуть абзац с набором слов - PullRequest
Новая
       8

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

0 голосов
/ 26 августа 2018

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

Есть ли способ обойти это? 

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>

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

? Поиск подходящего обходного пути ...

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

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>

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

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>

✨ Пробел + нулевая ширина Пространство для спасения

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

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>

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

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

0 голосов
/ 26 августа 2018

Обходной путь - удалить пустое пространство между пролетами и использовать hack с псевдоэлементом для имитации 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...