时间戳

首页 > 解决方案 > CSS -div 扩展为多行文本与单行文本

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

问题描述

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

选项 1 宽度：自动；- 小提琴：https ://jsfiddle.net/c21kt6r4/ 问题是左侧框扩展太多。

在此处输入图像描述

选项 2 - 宽度：最小内容；小提琴：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;
}

标签： htmlcsswidthcss-position

解决方案

按着这些次序。

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/

演示图像。

希望它会有所帮助！

推荐阅读