Разрыв строки в Safari вызывает проблемы

Question

Я только что подписался на этот конкретный вопрос и надеюсь, что вы можете помочь:)

Наш веб-сайт имеет область заголовка, где заголовок имеет серый фон.

Эта проблема возникает только в сафари: когда происходит разрыв строки (из-за более длинного заголовка), сафари по-прежнему отображает цвет фона с шириной предыдущей длины строки и добавляет дополнительную строку. Он отлично работает на 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

Если я правильно понимаю, вы хотите, чтобы цвет фона не покрывал всю строку, а был таким же длинным, как ваш текст? Это связано с тем, что ваш h1 является блочным элементом. Применяя стиль «display: inline», он должен применять фон только к ширине вашего текста.

 <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>

Также в случае необходимости вы можете изменить высоту строки, чтобы она не закрывала нижнюю строку.

Надеюсь, это поможет, если я понял неправильно, не стесняйтесь поделиться некоторыми экранами печати!