使包装内容的大小[重复]

Question

这个问题在这里已有答案：

• Make container shrink-to-fit child elements as they wrap 4个答案

当框中的内容换行时，该框的宽度会延伸以填满所有可用空间。有没有办法让盒子的宽度为“有效可见尺寸”？

这是代码和代码试用：

div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17rem;
}

span {
  border-bottom: 1px solid #444;
  text-align: center;
  font-size:29px;
}

<div>
  <span>
    Helloworld this willwrap
  </span>
</div>

https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0

我想让border-bottom只有最宽的文本行宽。

使用<br>标签不是一种选择。

我可以在跨度上设置width: min-content，但这会使文本换行超过必要。

Answer 1

在你的js小提琴中，只需给你跨越div的宽度。

<div>
<div class="myClass">
  <span>
    Hello world this will wrap
  </span>
  <div>
</div>

这是css

body {
  font-size: 3rem;
}

.myClass {
  height: 16rem;
  width: 30%;
  background-color: #dedede;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2rem;
}

.myClass span {
    width: 50%;
  border-bottom: 1px solid #444;
  text-align: center;
}