设置元素的宽度严格等于其文本内容

Question

考虑这个例子：

body {
  width: 330px;
  padding: 20px;
}

p {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: lime;
}

p:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 10px;
  height: 10px;
  background-color: red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Open in JSFiddle

它将生成以下布局：

是否有与浏览器兼容的方式使段落元素的宽度（绿色框）严格等于其文本内容？我希望红色标记在第一行的最后一个单词的右上角位置（在示例的单词“consectetur”的字母“r”附近）。像这样：

我将正文宽度设置为330px只是为了演示如果用户将窗口大小调整为此尺寸会发生什么。我希望解决方案能够完全响应。

此外，究竟是什么导致浏览器中出现此行为？你能解释一下这背后的渲染机制吗？

类似问题

• Fit block width to content when text wraps due to max-width
• max-width adjusts to fit text?

Answer 1

将元素的width设置为auto。