如何在inline-block元素中包装文本？

Question

使用内联块将h4元素垂直居中，但是当文本超出父div时无法包装文本。想了解为什么它不是自动包裹的。尝试过自动换行，但没有奏效。我想在其父级中包含h4元素。

＆＃13;

＆＃13;

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin-left: 10px;
}

span {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

h4 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.parent::before {
  white-space: pre;
  content: "";
}

＆＃13;

<div class="parent">
  <span class="centerHelper"></span>
  <h4 class="centerElement">Overflowing text</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的span和h4是inline-block。因此，即使它们之间的空间很小，也会导致h4的内容溢出。

  

使用HTML注释作为元素之间的间隔符同样如此   不在元素之间放置空格：

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

.parent{  
  height:100px;  
  width:100px;  
  border:1px solid black;  
  margin-left:10px;  
}
span{  
  display:inline-block;  
  height:100%;  
  vertical-align:middle;  
}  
h4{  
  display:inline-block;  
  vertical-align:middle;  
  margin:0;  
  }  
.parent::before{  
  white-space:pre;  
  content:"";  
}

<div class="parent">
	<span class="centerHelper"></span>
    <h4 class="centerElement">Overflowing text</h4>  
</div> 
<br>
<br>
<br>	
 <div class="parent">  
    <span class="centerHelper"></span><!--
    --><h4 class="centerElement">No Overflow with comment</h4>  
</div> 

Answer 2

为什么只需执行此操作就可以复制所有这些代码：

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin-left: 10px;
  display:flex;
  align-items:center;
}

h4 {
  margin: 0;
}

<div class="parent">
  <h4 class="centerElement">Overflowing text</h4>
</div>