如何用CSS实现多行文本容器紧贴文本并消除右侧间隙？

前置说明 #

经证实，目前仅靠CSS无法实现该效果。

我定义了固定宽度的outer类和包含文本的inner类，代码如下：

HTML代码 #

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod tempor
  </div>
</div>

CSS代码 #

.inner {
  padding: 0.25rem;
  border: 1px solid grey;
}

.outer {
  width: 12.5rem;
  padding: 0.25rem;
  border: 1px solid lightblue;
}

现在的问题是，上述代码会让inner容器右侧出现多余间隙（效果A）：

我想要的是inner能紧紧包裹文本内容（效果B）：

要求方案必须比给inner指定精确宽度更动态，而且不能改变文本的换行位置（比如不能用word-wrap: break-all），怎么实现？

补充说明 #

内边距只是为了让示例效果更清晰，就算移除内边距，问题依然存在：

当前效果：

期望效果：

目前纯CSS做不到这个需求。因为CSS没有能力让块级元素的宽度自动适配换行后文本的最大行宽——块级元素默认会撑满父容器的宽度，而行内元素或inline-block元素的宽度是由未换行的完整文本决定的，无法匹配换行后的最长行宽度。

如果一定要实现类似效果，只能借助JavaScript：

• 先获取outer容器的宽度，以及文本在其中的换行情况
• 动态计算出换行后最长一行的宽度，再将该宽度设置给inner容器

这样既能保留文本原有的换行位置，又能让inner紧紧包裹住文本内容。

内容的提问来源于stack exchange，提问作者Bret Cameron