Padded Text Padding Überlauf nicht Auswirkungen auf Wortbruch

Question

Word "unter" sollte in die nächste Zeile gehen, aber es verursacht nicht von Inline-Padding ich denke.

Gibt es sowieso ich kann Text zum nächsten Zeile brechen, wenn weiße Polsterung Kante des Containers berührt.

Text muss als Inline bleiben, weil ich diesen Leerraum zwischen Textzeilen brauche. Tho, wenn Sie eine Lösung haben, die ändern muss, und das Ergebnis sieht genauso aus wie bei mir nur das Problem ist behoben, als das wird auch funktionieren.

P.S. Mein Container in der realen Situation ist 100% 100%, also Breite, Höhe ist nicht für den Block festgelegt.

Es scheint, dass es nicht möglich ist Ursache Ursache Inline-Padding hat keine Auswirkungen auf die Verpackung in irgendeiner Weise und wird vollständig ignoriert.

body { 
 
    background: #111111; 
 
} 
 
.container { 
 
    width: 338px; 
 
    height: 600px; 
 
    background-color: #000; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    font-weight: bold; 
 
    font-size: 48px; 
 
    background-color: #fff; 
 
    display: inline; 
 
    line-height: 95px; 
 
    box-decoration-break: clone; 
 
    -webkit-box-decoration-break: clone; 
 
    padding: 10px 20px 10px 20px; 
 
} 
 
.sub { 
 
    display: inline; 
 
    background-color: #fff; 
 
    font-size: 28px; 
 
    padding: 20px 20px; 
 
    line-height: 90px; 
 
    box-decoration-break: clone; 
 
    -webkit-box-decoration-break: clone; 
 
}

<div class="container"> 
 
    <h1>Heading title</h1> 
 
    <br/> 
 
    <span class="sub">Some random text under heading title</span> 
 
</div>

Answer 1

Lösung war sehr einfach. Nur mußten Seitenpolster aus meinen Inline-Elementen entfernen, hinzufügen, anstatt sie Box Schatten hinzufügen, ähnlichen

box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 

Für 20px auf jeder Seite. (wie Padding Größe, die ich vorher verwendete) Und jetzt weiß bg hinter Inline-Elementen sieht aus wie Überläufe auf jeder Seite des Containers (aber eigentlich ist es nur die Box Schatten). Das Hinzufügen der gleichen Füllung wie die Größe für den Boxschatten auf jeder Seite des Containers macht es perfekt.

JSFiddle here

body { 
 
    background: #111111; 
 
} 
 
.container { 
 
    width: 298px; 
 
    height: 600px; 
 
    background-color: #000; 
 
    font-family: Arial; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
} 
 
h1 { 
 
    font-weight: bold; 
 
    font-size: 48px; 
 
    background-color: #fff; 
 
    display: inline; 
 
    line-height: 95px; 
 
    box-decoration-break: clone; 
 
    -webkit-box-decoration-break: clone; 
 
    padding: 10px 0px 10px 0px; 
 
    box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 
 
} 
 
.sub { 
 
    display: inline; 
 
    background-color: #fff; 
 
    font-size: 28px; 
 
    padding: 20px 0px; 
 
    line-height: 90px; 
 
    box-decoration-break: clone; 
 
    -webkit-box-decoration-break: clone; 
 
    box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 
 
}

<div class="container"> 
 
    <h1>Heading title</h1> 
 
    <br/> 
 
    <span class="sub">Some random text under heading title</span> 
 
</div>

Answer 2

Wenn Sie inline-block verwenden, anstatt inline Sie das gewünschte Verhalten bekommen, aber dies führt dazu, dass beide Leitungen in einem Kastenelement gewickelt werden.

Hier ist ein Fiddle mit dem veränderten Stil, alles, was ich war geändert:

.sub { 
    display: inline-block; // was "inline" 
    background-color: #fff; 
    font-size: 28px; 
    padding: 20px 20px; 
    line-height: 90px; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
} 

Weitere Details über das Problem Sie konfrontiert sind:

In Ihrem gegebenen Beispiel die Breite des h1 wird durch das breiteste Element auf Ihrer Seite bestimmt, das container ist. Sobald die Breite der Überschrift die Breite des Umbruchelements überschreitet, wird sie in die nächste Zeile umgebrochen. Ihre Regel box-decoration-break: clone; wird nicht verwendet, um die Überschrift irgendwie in zwei Elemente gleicher Breite zu schneiden. Sie stellt einfach sicher, dass die Auffüllung der beiden umhüllten Elemente gleich ist. Wenn Sie sie weggelassen hätten, würden Sie keine Auffüllung auf der rechten Seite erhalten erstes und kein Padding links von der zweiten Zeile.

---

Eine weitere Idee

Sie einen Trick verwenden, könnte das gewünschte Ergebnis zu erhalten, beinhaltet keine JS:

Da die Wickelposition des Titels durch das nächste Element definiert die Breite definiert ist Sie können Ihren Titel in einer DIV mit einer definierten Breite hinzufügen. Dadurch wird sichergestellt, dass der Titel an der richtigen Position umgebrochen wird, wie Sie in this Fiddle sehen können. Im Grunde genommen das ist der Code, den Sie benötigen:

HTML:

<div class="defined-width-for-heading"> 
    <span class="sub">Some random text under heading title</span> 
</div> 

CSS:

.defined-width-for-heading { 
    width: 300px; 
} 

.sub { 
    display: inline; 
    background-color: #fff; 
    font-size: 28px; 
    padding: 20px 20px; 
    line-height: 90px; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
} 

Answer 3

.sub { 
    display: block; 
    background-color: #fff; 
    font-size: 28px; 
    padding: 20px 20px; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
} 

Ändern der Anzeige zu blockieren/inline-block und entfernen line-height . Ich hoffe, es würde helfen.

Answer 4

Ohne JS können Sie das gewünschte Ergebnis nicht nur durch CSS erhalten. Ihr aktueller Code ermöglicht es <span>, den Rahmen des Containers zu überlaufen (nicht sicher, warum), während der Tag <h1> das Wort genau auf dem Rahmen des Containerkastens bricht. Meine beste Schätzung ist, den ganzen Text in <h1> einzuschließen und Klassendefinition für <h1> und mit <span> als ein Kindelement zu verwenden, um das allgemeine Styling der Elemente unten zu ändern line-height &.

Ich würde vorschlagen, Ihren Code wie ein Beispiel unten zu wiederholen.

body { 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 20px; 
 
    background: #000; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 300px; 
 
    margin: auto; 
 
    height: auto; 
 
    background: #333; 
 
    padding: 20px; 
 
} 
 

 
h1 { 
 
    font-weight: 800; 
 
    color: #333; 
 
    text-align: center; 
 
} 
 

 
h1 span { 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
} 
 

 
h1.title span{ 
 
    padding: 10px 20px; 
 
    background-color: #fff; 
 
    font-size: 1.5em; 
 
    line-height: 2em; 
 
    margin-bottom: 40px; 
 
} 
 

 
h1.desc span { 
 
    padding: 5px 10px; 
 
    background-color: #ddd; 
 
    font-size: 1em; 
 
    line-height: 1.8em; 
 
    margin-bottom: 20px; 
 
}

<section class="container"> 
 
    <h1 class="title"> 
 
    <span>Long heading title here</span> 
 
    </h1> 
 
    
 
    <h1 class="desc"> 
 
    <span>The quick brown fox jumps over the lazy dog.</span> 
 
    </h1> 
 
</section>

Wie Sie im Code-Schnipsel beide <span> & <h1> Elemente respektieren die .container Grenze sehen und überfluten sie nicht.