根据内容强调div

Question

我有一个跨越多行的文本块。

我希望根据最长的文本行整体标注文本块。

文本块的宽度设置为自动，我不想设置固定的宽度，因为我有不同的文本块需要同样的下划线。

＆＃13;

＆＃13;

p {
  display: inline-block;
  border-bottom: 1px solid #888;
}

＆＃13;

<p>first line of test text which is long enough to stretch onto a second line becausealloicioudsiscool hello line hello line hello line hello line hello. prettysuperlongline long line becausealloicioudsiscool</p>

＆＃13;

＆＃13;

＆＃13;

虽然这个片段在您看到的大小上可能看起来不错，但我拍下了我遇到的问题并将其粘贴在下面。

Display:inline-block;在我没有长话的情况下运作良好，但如果我有一个像＃34; superlongline＆＃34;这样的长字，它会使div成为全宽并且单词会下降到下一行。

当内容未实际到达div的末尾时，border-bottom最终会占据div的整个宽度。

这是我希望强调的其中一个文本块的图片。我希望它停在＆＃34; Mountain＆＃34;的末尾，但由于我上面提到的内容，它延伸了一点。有什么想法吗？