请考虑以下示例:

null

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>

null

在JSFiddle中打开

它将生成以下布局:

有没有一种浏览器兼容的方法使段落元素的宽度（绿框）严格等于它的文本内容？我希望红色标记呈现在第一行最后一个单词的右上方位置（靠近示例中单词“consectetur”的字母“R”）。像这样:

我将主体宽度设置为330px只是为了演示如果用户将其窗口大小调整为这样的尺寸会发生什么。我希望解决方案是完全响应的。

还有，到底是什么原因导致了浏览器中的这种行为呢？你能解释一下这背后的渲染机制吗？

• 当文本因最大宽度换行时，使块宽度适应内容
• 调整最大宽度以适应文本？