Line-Break in Safari causing problems

user_11664065 0
Viewed 2507

I just signed up for that one specific question and hope you can help :)

Our website has a title-area where the title has grey background.

The issue here occurs only on safari: When there occurs a line-break (due to a longer headline), safari still renders the background-color with the width of the previous line-lenght and adds an additional line. It works fine on Chrome, Firefox and others except on Safari it looks like this.

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;

It should behave like you would expected: When there occurs a line-break it should also break the background-color.

safari css html
2 Answers

I solved it using white-space: nowrap;

user_116640650

If I understand right you want the background colour not to cover the whole line, but just as long as your text is? That is due to your h1 being a block element. By applying a "display: inline" style it should apply the background only to the width of your text.

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

Also in case you need you can change your line height so that it does not cover the below line.

Hope it helps, in case I understood wrong feel free to share some printscreens!

user_116638270
Related