Question

我正在尝试在带有换行符的液体文本容器上保留一个图标。

问题在于，当换行符时，在文本结束之前和div结束处有一个很大的间隙。这使我的浮动元素从差距结束的地方开始。

有没有办法让div只是其内容的大小？

检查此codepen：https://jsfiddle.net/e38edtdy/1/ 调整输出区域的大小以查看空间的间隙。该按钮将自动调整大小以查看间隙。

*{
padding:0;
margin:0;
top:0;
left:0;
  }
 #mainContainer{
 width:100%;
      border:black solid thin;
}

 #lt{
 color: black;
 background-color:gray;
 tex-align:left;
 max-width:90%;
float:left;

}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}

<body  >

  <div id='mainContainer'>
    <div id='lt'>This is The information This is The information This is The information</div>
    <div id='icon'></div>

  </div>
  <br/>
  <input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>

Answer 1

您可以选择将hyphens: auto放在文本容器上，以便更好地处理文本。 Firefox也需要语言属性，例如lang='en-US'。

使div大小正好是文本宽度？

1 个答案: