html - 设置元素的宽度严格等于它的文本内容

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

将元素的宽度设置为auto。