CSS -div扩展了多行文本与单行文本

Question

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

选项1宽度：自动; - 小提琴：https://jsfiddle.net/c21kt6r4/问题是左侧盒子扩大了太多。

选项2 - 宽度：min-content;小提琴：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%在两个lefr右侧给出间距。我们要包装成div，因为我们想要相对于div的位置我们正在应用表格单元格属性。

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

3）给word-break: break-all;你的标签标签.item label所以这个词可以占用整个空间

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

Demo image.

希望它会有所帮助！

Answer 2

我建议你在这里使用max-width，因为它会将item元素的最大宽度限制为某个值，并且可以为所有小于它的元素包含width:auto特征宽度，例如：

.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:auto;
  max-width:100px;
}

但是，我会采用JS方法，因为你不知道会出现什么样的文字。