使包装盒的包装内容大小

Question

当包装盒中的内容换行时，包装盒的宽度会扩展以填满所有可用空间。有没有办法使盒子的宽度成为其“有效可见尺寸”？

这里是代码和可尝试的代码笔：

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;
}