html - Safari 中的换行导致问题

Question

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

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

这里的问题只发生在 safari 上:当出现换行符时(由于较长的标题)，safari 仍然使用前一个 line-lenght 的宽度渲染背景颜色并添加一个额外的行。它在 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; 解决了这个问题