创建一个底部边框，它是子跨度底行的长度

Question

TL:DR - 我有一组在容器 div 中反向换行的跨度，我需要一个“边界线”，它仅是底部跨度集的宽度。 （方案可以使用css、html、js任意组合）

为了提供一点上下文，我使用了这些由一些 JS 制作的跨度框，因此我可以先进行反向换行并填充底线。

有问题的JS：

x = document.getElementsByClassName("ipsumNumber");
for (i = 0; i < x.length; i++) {
  const wrapText = x[i];
  wrapText.innerHTML = wrapText.textContent
    .split(" ")
    .map(function (y) {
      return "<span>" + y + "</span>";
    })
    .reverse()
    .join("");
}

我想要一个底栏，它比跨度底线宽任意数量的像素。我目前的策略是在 css 文件中使用大量 @media。

类似这样的：

.ipsumHolder {
    vertical-align: middle;
    width: fit-content;
    height: fit-content;
    display: flex;
    padding-left: 0.3em;
    position: absolute;
}
.ipsum::after {
    content: "";
    position: absolute;
    margin-bottom: -5.5px;
    margin-right: 0.3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    border-bottom: 10px solid blue;
    width: 80%;
    color: transparent;
    bottom: 0;
}

p.ipsumNumber{
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    justify-content: center;
}

@media (max-width: 852px) {
    #ipsum::after {
        line-height: 2em;
        content: "Neque porro quisquam";
    }
}

@media (max-width: 666px) {
    #ipsum::after {
        line-height: 2em;
        content: "Neque porro quisquam est qui dolorem";
    }
}

@media (max-width: 600px) {
    #ipsum::after {
        line-height: 1em;
        content: "quisquam est qui dolorem";
    }
}

@media (max-width: 428px) {
    #ipsum::after {
        line-height: 3em;
        content: "qui dolorem";
    }
}

完美契合：

非完美拟合（最后一行是最大的）：

跨度框：

<div class="ipsumHolder">
  <p id="ipsum" class="ipsumNumber">
    <span>ipsum</span><span>dolorem</span><span>qui</span><span>est</span><span>quisquam</span><span>porro</span><span>Neque</span>
  </p>
</div>

这太可怕了，恶心？？？？ （更不用说每页大约有 4 个这样的文本框，我必须为 4 个不同的文件执行此操作）！

我知道必须有更好的方法，但我就是想不出。我还没有找到“width: 100%;”的方法，只填写最底行。

Answer 1

这是一个纯 CSS 的 hacky 解决方案。调整容器大小以注意响应性

.ipsumNumber {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  gap: 5px; /* the gap */
}
.ipsumHolder {
  width: 300px;
  overflow: hidden; /* we need to hide the overflow */
  resize: horizontal;
  background: #000; /* main background */
}
.ipsumNumber span {
  position: relative;
}
.ipsumNumber span:before,
.ipsumNumber span:after{
  content: "";
  position: absolute;
  height: 5px;
}
/* your underline */
.ipsumNumber span:before {
  inset: 100% -5px auto; /* 5px same as gap, you can use bigger if you want but not smaller  */
  background: blue;
}
/* the hack that will hide the non-needed unreline */
.ipsumNumber span:after {
  inset: auto -200vmax 100%; /* 200vmax is a very big value */
  background: #000; /* same as main background */
  z-index: 1;
}

<div class="ipsumHolder">
  <p id="ipsum" class="ipsumNumber">
    <span>ipsum</span><span>dolorem</span><span>qui</span><span>est</span><span>quisquam</span><span>porro</span><span>Neque</span>
  </p>
</div>