如何使内联块元素跨越文本行的其余部分？

Question

情况如下：

我有一个容器（图片中为div），只有一个孩子 - span。我想添加第二个孩子，以便占用图片中的整个红色空间。

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

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

UPD： 第二个元素是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

这是一种在JavaScript中执行此操作的方法，假设第二个孩子有id="second"：

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>