Div占用的面积不及字母的“宽度”值

 收藏

I applied display:inline-block to the h2 tag whose width value is not fixed in the div tag and then created a span tag with sibling elements so that it could always follow.

Despite the application of display:inline-block, the width value is not generated as much as the contents and appears as shown in the following figure. image

The white-space:nowrap; attribute is not being considered, as the h2 tag must be a line change if it is more than 100 percent of 'div'.

我该怎么办?

div{
  width:100%;
}
h2{
  display:inline-block;
  word-break: break-all;
  font-size:20px;
}
span{
  display:inline-block;
  word-break: break-all;
  font-size:13px;
}
<div>
  <div>
    <h2>heading...</h2>
    <span>text...</span>
  </div>
</div>
回复