html - CSS -div 扩展为多行文本与单行文本

Question

我试图在位于另一个 div 内绝对位置的边框 div 中显示文本。

带有 width:auto; 的选项 1 - fiddle: https://jsfiddle.net/c21kt6r4/问题是左侧框扩展太多。

选项 2 - 使用 width:min-content; fiddle :https://jsfiddle.net/ay159rw6/2/问题是右侧框文本换行。

在 div 中包装文本并在多行和单行文本中显示正确边框的简洁方法是什么？

供引用的 html 是:

<div class="main">
  <div class="item" style="left:0;">
      <label>SHAMPOO & CONDITIONER</label>
  </div>
  <div class="item" style="left:165px;">
      <label>WHAT EVER</label>
  </div>
</div>

和 CSS:

.main{
 position:relative;
 border:solid black 1px;
 width:400px;
 height:400px; 
}
.item{
  border:solid blue 1px;
  width:160px;
  height:150px;
  position: absolute;
}
.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:min-content;
}

Answer 1

按照以下步骤操作。

1) 您需要在 div 中扭曲标签，然后给它 position:absolute。此外，您还需要使用 right:5% 为左右两侧提供间距。我们将包装到一个 div 中，因为我们希望 position relative 到 div 我们正在应用 table cell 属性。

2) 你需要display: table-cell;你的label标签.item label

3) 给 word-break: break-all; 你的 label 标签 .item label 所以 word 可以占据整个空间

这是工作演示:https://jsfiddle.net/o5dgzn0c/

Demo image.

希望对您有所帮助!