html - 使div宽度适合文本并仍使用max-width吗？

我想能够使用max-width并仍然适合文本框的宽度。如您在下面的示例中所见，框的宽度比文本宽。

关键是，我希望文本在黑色代码的下方居中，但保持对齐，如您在代码段中所见。

尝试仅使用display:inline，但似乎无法将max-width与该选项一起使用。

.box {
  max-width:130px;
  background-color:#f00;
  display:inline-block;
  position:relative;
  border-top: 3px solid #000;
}
.box:before {
  content: "";
  width: 4px;
  height: 8px;
  background-color: black;
  position: absolute;
  top: -10px;
  left: calc(50% - (4px / 2));
 }

<div class="box">abcdefghijk abcdefghijk<div>

最佳答案

您的内容abcdefghijk abcdefghijk大于130px，因此您的div显示为130，并使内容自动换行。

尝试在内容abcdefghijk <br/> abcdefghijk中添加一个分隔符，您的div将显示为小于130。

关于html - 使div宽度适合文本并仍使用max-width吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42975203/