html - 当文本包裹成多行时，CSS 缩小宽度

Question

我正在构建一个列表小部件，其中有多个 <li>内部包裹着两个兄弟元素。

A <span>标题和 <div>为底线。该行必须根据其相邻 span 元素的宽度而变化。

.limit-area {
  width: 250px;
  height: 350px;
  background-color: #96ceb4;
}
.limit-area ul {
  font-size: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}
.limit-area ul li {
  background-color: #ffeead;
  display: table;
  margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
  font-size: 24px;
  color: #010101;
}
.limit-area ul li .wrapper .line {
  height: 6px;
  margin-top: 12px;
  background-color: #ff6f69;
}

<div class="limit-area">
  <ul>
    <li>
      <div class="wrapper">
        <span>One line only</span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
        <span>Bigger one line only </span>
        <div class="line"></div>
      </div>
    </li>
    <li>
      <div class="wrapper">
      <span>Long line and go crazyyyyyy</span>
      <div class="line"></div>
    </div>
  </li>
  </ul>
</div>

jsfiddle 上的完整示例:https://jsfiddle.net/arnauth/55josw6e/

在上面的例子中，我可以很容易地在前两个列表项上实现我的目标。

这里的诀窍是当我有一个分成两行或更多行的长行时具有相同的效果 - 示例中的第三行。

线条元素必须与文本宽度相同，因此在示例中必须停在单词“go”附近 - 而不是显示在容器的末尾。

我们的想法是尝试使用仅 CSS 规则来避免基于 javascript 的代码来解决问题。

感谢您的关注。

Answer 1

尝试将此添加到您的范围内:

border-bottom: 6px solid #ff6f69;

所以它最终看起来像这样:

span {
          font-size: 24px;
          color: #010101;
          border-bottom: 6px solid #ff6f69;
        }

应该是这样的 https://jsfiddle.net/55josw6e/3/

希望这能回答您的问题。