Safari 中的换行导致问题

Question

我刚刚注册了一个特定的问题，希望您能提供帮助:)

我们的website 有一个标题区域，标题为灰色背景。

这里的问题只发生在 safari 上：当出现换行符时（由于标题较长），safari 仍然以前一行的宽度呈现背景颜色并添加一个额外的行。它在 Chrome、Firefox 和其他设备上运行良好，除了在 Safari 上看起来像这样。

HTML

<div class="so-widget-sow-headline so-widget-sow-headline-default- 9cab5f85f9f7"><div class="sow-headline-container ">
 <h1 class="sow-headline"> E-Learning-Erstellung </h1>                   
 <div class="decoration">
  <div class="decoration-inside"></div>
 </div>
 <h2 class="sow-sub-headline">Individuell. Von A-Z.</h2>
</div>

CSS

.header-img-area h2.sow-headline, .header-img-area h1.sow-sub-headline, .header-img-area h2.sow-sub-headline, .header-img-area h3.sow-sub-headline {
    padding: 10px;
    margin: 10px 0 !important;
    background-color: rgba(78, 78, 78, 0.9);
    box-shadow: -10px 0px 0 rgba(78, 78, 78, 0.9), 10px 0px 0 rgba(78, 78, 78, 0.9);
    -webkit-box-shadow: -10px 0px 0 rgba(78, 78, 78, 0.9), 10px 0px 0 rgba(78, 78, 78, 0.9);
    -moz-box-shadow: -10px 0px 0 rgba(78, 78, 78, 0.9), 10px 0px 0 rgba(78, 78, 78, 0.9);
    box-decoration-break: clone;

它的行为应该像你预期的那样：当出现换行时，它也应该打破背景颜色。

Answer 1

我使用white-space: nowrap;解决了它

Answer 2

如果我理解正确，您希望背景颜色不覆盖整行，但只要您的文字是？那是因为你的 h1 是一个块元素。通过应用“显示：内联”样式，它应该只将背景应用到文本的宽度。

 <h1 class="sow-headline" style="display: inline"> E-Learning-Erstellung</h1>                   
 <div class="decoration">
  <div class="decoration-inside"></div>
 </div>
 <h2 class="sow-sub-headline">Individuell. Von A-Z.</h2>
</div>

此外，如果您需要，您可以更改行高，使其不覆盖下面的行。

希望对您有所帮助，如果我理解错了，请随时分享一些打印屏幕！