使一个接一个的单词与该单词的最小部分一样宽？

Question

我有一个具有特定宽度的列表，所有较大的单词都会被分词。但是现在我想在这些破碎的单词下面划一条线，就像那个单词的底部一样大。这可能听起来令人困惑，所以这里有一个代码笔来说明出了什么问题。

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>

这就是我想要的：

Answer 1

如果您可以考虑作为内联元素的嵌套元素，您可以考虑使用背景和阴影的这个 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>