当h1标题分为第二行时如何添加填充

Question

我有一个宽度为46％的div。有一个h1标签。文本较长时，h1标签的文本被破坏。但我想在第二行使用相同的左边填充。

我附上了一张图片和css，以便更好地理解。有没有解决方案。

这是Html

<div class="header-tite">
    <h1>An Epidemic 37 Years in the Making</h1>             
</div>

这是CSS

.header-tite{
  width:45%;
  float:left;
  position:absolute;
  left:95px;
  bottom:42px;
  z-index:1;
}

.header-tite h1{ 
   font-family: 'gotham_bookregular'; 
   font-size:55px; 
   font-weight:normal; 
   color:#191919; 
   line-height:68px; 
   padding:0px 10px 0px 10px; 
   background:#FFFFFF;
   display:inline;
   opacity:0.85;
 }

这是输出

在Y之前我想要相同的差距。

Answer 1

如果需要存档，请不要在块元素上使用display: inline。如果您真的需要，可能需要在h1标记内使用span标记来分别设置额外文本的样式。我不建议你介意这个差距，特别是如果你计划这个文本是动态的，但是如果这个文本完全可以控制，那么你可以使用span标签进行额外的样式，看看这里{{希望这会有所帮助。