Сделать строку за словом такой же широкой, как самая маленькая часть этого слова? - PullRequest
Новая
       56

Сделать строку за словом такой же широкой, как самая маленькая часть этого слова?

1 голос
/ 22 апреля 2020

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

ul {
  padding: 0;
  word-break: break-all;
  list-style: none;
  width: 100px;
  border: 1px solid blue;
}

li {
  padding: 10px 0;
}

.line {
  position: relative;
  display: inline-block;
}

.line::after {
  content: '';
  position: absolute;
  display: block;
  background-color: red;
  height: 2px;
  width: 100%;
}
<ul>
  <li>woord</li>
  <li class="line">woooooooooooooooord</li>
  <li>wooord</li>
  <li class="line">word</li>
</ul>

Вот что я хочу:

enter image description here

1 Ответ

0 голосов
/ 22 апреля 2020

Если вы можете рассмотреть вложенный элемент, который является встроенным элементом, вы можете рассмотреть эту идею hacky , используя фон и тени: 

ul {
  padding: 0;
  word-break: break-all;
  list-style: none;
  width: 100px;
  border: 1px solid blue;
}
li {
  padding: 10px 0;
  overflow:hidden; /* don't forget this */
}
.line  > *{
  padding-bottom:3px; /* this will control the distance of the red underline from the text*/
  background:
    linear-gradient(#fff,#fff) top /100% calc(100% - 5px),  /* this will cover the red gradient of the line above*/
    linear-gradient(red,red) bottom/100% 2px; /* this is your border that will show for the last line only */
  background-repeat:no-repeat;
  /* this shadow will cover the extra red on the right
     since the last line cannot completely cover the border of the above line
     yes I know it's crazy ...
  */
  box-shadow: 
      5px 0px 0 0px #fff,
      10px 0px 0 0px #fff,
      15px 0px 0 0px #fff,
      20px 0px 0 0px #fff,
      25px 0px 0 0px #fff,
      30px 0px 0 0px #fff,
      35px 0px 0 0px #fff,
      40px 0px 0 0px #fff,
      45px 0px 0 0px #fff,
      50px 0px 0 0px #fff,
      55px 0px 0 0px #fff;
}
<ul>
  <li><span>woord</span></li>
  <li class="line"><span>woooooooooooooooord</span></li>
  <li class="line"><span>woooooooooooooooodqsdrd</span></li>
  <li class="line"><span>wooood qs q dqoooooooooooodqsdrd</span></li>
  <li><span>wooord</span></li>
  <li class="line"><span>word</span></li>
  <li class="line"><span>wo</span></li>
</ul>
...