I was looking for a solution to the problem, but I haven't found a solution yet. The following article helped a little:

Inline text - background color with padding

I would like to have a gradient in the background and padding on all sides accordingly if the text is long and goes to the next line.

It should look something like this:

pic

.mytext h1 {
    display: inline;
    padding: 5px 10px;
    background: linear-gradient(#0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
}

.mytext1 h1 {
    background: linear-gradient(#0095DB, #00509F);
    color: white;
    display:inline;
    white-space:pre-wrap;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
    padding: 5px;
    padding-left:0px;
}
    
.mytext2 h1 {
    margin-left: 16px;
    background-color: #00509F;
    color: #FFFFFF;
    display:inline;
    white-space:pre-wrap;
    font-size: 40px;
    line-height: 1.6em;
    font-family: sans-serif;
    padding: 5px;
    padding-left:0px;
    box-shadow: -16px 0 0 #00509F;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<div class="mytext1">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<div class="mytext2">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

PS: box-shadow did not help because of gradient

thanks in advance

CodePudding user response：

You already got the trick using box-decoration-break: clone; simply apply it to your first example

.mytext h1 {
    display: inline;
    padding: 5px 10px;
    background: linear-gradient(130deg,#0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have to add 90deg to linear-gradient and change display: inline to display: inline-block

    .mytext h1 {
    display: inline-block;
    padding: 5px 10px;
    background: linear-gradient(90deg, #0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>