如何使paragraph元素收缩至文本宽度？无需嵌套span/div容器

当然可以，不需要额外嵌套span或div容器，只需要通过CSS修改<p>元素的布局属性即可，以下是几种常用方案：

方案1：使用display: inline-block #

这是最常用的方案，将段落从默认的块级元素改为行内块元素，它会根据内容自动收缩宽度，同时保留块级元素的部分特性（比如可以设置上下margin、padding）：

p {
  display: inline-block;
}

方案2：使用display: table #

这个方案兼容性极佳（支持到IE8），table元素本身会自适应内容宽度，而且不会破坏原有块级元素的垂直布局特性：

p {
  display: table;
}

方案3：使用width: fit-content #

这是CSS3新增的属性，语义化最强，直接明确指定宽度适配内容，不过需要注意旧版浏览器（比如IE）不支持：

p {
  width: fit-content;
  /* 针对不同浏览器的前缀（可选） */
  width: -moz-fit-content;
  width: -webkit-fit-content;
}

方案4：使用浮动（不推荐） #

通过float: left也能让元素收缩到内容宽度，但浮动会脱离文档流，可能需要额外处理父容器的清除浮动问题，仅在特定布局场景下使用：

p {
  float: left;
}
/* 父容器清除浮动示例 */
.parent-container::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者Artur Müller Romanov