javascript - 如何使行内 block 元素跨越文本行的其余部分？

Question

情况是这样的:

我有一个容器(图片中的 div)，它有一个 child - span。我想添加第二个 child ，这样它就会占据图片中的整个红色空间。

当然，如果 span 只需要一行，这可以用 flexbox 轻松完成。但是在图片中出现换行符的情况下，“flex”-ing 容器会导致所有行跳到一边并为第二个 child 释放空间，这不是我想要的。

如果我尝试实现的目标无法通过 CSS 实现，是否有办法访问文本最后一行的右边界？用 JS 计算宽度是一个合适的选择，我只需要一种方法来判断行中已经占用了多少空间。

更新:第二个元素将是一个 input。这就是为什么 text-align: justify 不会这样做的原因。

代码如下:

div {border: 1px dotted black; width: 400px}

<div>
  <span>lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</span>
  <input >
</div>

Answer 1

假设第二个 child 有 id="second"，这里有一种在 JavaScript 中执行此操作的方法:

var secondElement = document.getElementById('second');
var parentWidth = secondElement.parentElement.offsetWidth;
secondElement.style.width = parentWidth - secondElement.offsetLeft + 'px';

这将通过从其父元素的宽度中减去第二个元素的左侧偏移量来动态计算宽度。

function computeWidth() {
  var secondElement = document.getElementById('second');
  var parentWidth = secondElement.parentElement.offsetWidth;
  secondElement.style.width = (parentWidth - secondElement.offsetLeft - 5) + 'px';
  // The -5 part here is adjustable, see what value fits you
}

document.querySelector('button').onclick = computeWidth;

div {border: 1px dotted black; width: 500px}

<div>
  <span>lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam</span>
  <input id="second" />
</div>
<button>Compute width</button>