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

我试图显示位于另一个div中绝对位置的border div中的文本

带有宽度的选项1：自动-小提琴： 问题是左侧框膨胀过大

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

遵循以下步骤

1） 您需要将标签扭曲到div中，然后将其设置为

位置：绝对
。您还需要使用
right:5%
在左、右两侧指定间距。我们将其包装到一个div中，因为我们希望相对位置到我们正在应用表单元格属性的div

2） 需要
显示：表格单元格您的标签标签
。项目标签

3） 给予
断字：全部断字
您的标签标签
。物品标签
，这样word就可以占据整个空间

以下是工作演示：


希望这会有帮助
 我建议您选择这里的
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方法，因为你不知道会出现什么文本。
我认为css不可能做到这一点，如果你需要动态脚本，因为一个元素不知道它的内容何时需要/将要换行。CSS的一个解决方法是给元素一个
最小宽度
，这样它就不会换行到小的文本内容。谢谢@Mohammad A-但是我需要换行才能在单词级别工作。在单词级别？你能进一步解释一下吗？谢谢，@MS90-不太理想，但看起来是目前为止最好的解决方案。。。你将如何用js优雅地解决这个问题？
.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;
}