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

Question

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

选项1，具有 width：auto; -小提琴：https://jsfiddle.net/c21kt6r4/ 问题是左侧框扩展得太大。

选项2- width：min-content; 小提琴：https://jsfiddle.net/ay159rw6/2/ 问题在于右侧框的文本会自动换行。

在div中将文本换行并在多行和单行文本中显示正确边框的干净方法是什么？

供参考的html是：

pandas.DataFrame.to_csv

和CSS：

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

Answer 1

请按照以下步骤操作。

1）您需要在div中扭曲标签，然后将其赋予position:absolute。另外，您还需要使用right:5%在左右两个左右边之间留出间距。我们将其包装到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方法。