html - 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;解决了这个问题