Wrap Text mit einer bestimmten Breite und voller Breite Hintergrund

Question

Ich arbeite mit WordPress Ultimatum Theme und versuche, den Inhalt der Seitentitel meines internen Seitenlayouts zu stylen.

Der Titel der Seite als H1 mit dem Textinhalt direkt nach innen gesetzt wird, und der Rest des Seiteninhaltes folgt direkt in einem div:

<article> 
    <h1>Title</h1> 
    <div class="entry-content" > 
     <div class="row" > 
      <div class="wrapper" > 
       <p>Some Text</p> 
      </div> 
     </div> 
    </div> 
</article> 

Ich mag, dass meine Seite auf ein Maximum beschränken Breite, und ich kann dies für alle meine Seite Inhalt tun, aber ich kann nicht mit der H1, da es nur Textinhalt innerhalb des Elements ist.

Im Wesentlichen ähnlich HTML, wie oben, möchte ich meine Seite aussehen:

... aber es sieht so aus:

... statt .

Gibt es eine Möglichkeit, dass ich den Text in meinem H1 bei einer bestimmten Breite zu wickeln zwingen kann (und in der Mitte, dass Textblock innerhalb der H1), ohne die HTML-Bearbeitung (das heißt, ohne untergeordnete Elemente in den H1? vielleicht könnte dies, indem sie auf Pseudoelemente erfolgen würde ich lieber nicht ein Bündel von Regeln für das Auffüllen in Medien-Anfragen macht

Here is a JSFiddle!

Dank

Answer 1

Sie müssen links und rechts Polsterungen definieren:?.!

h1 { 
    width:100%; 
    padding: 40px calc(50% - 300px); 
    margin:0; 
    text-align:center; 
    background-color:#337ab7; 
} 

Der Wert der linken und rechten Paddings ist calc(50% - 300px). Es macht Textbreite immer 600px, wenn 600px weniger als 100% oder 100%, wenn Bildschirmbreite weniger als 600px ist.

https://jsfiddle.net/8u0rtb81/

Answer 2

Sie können die width: 100% aus dem Kopf entfernen und setzen padding-left und padding-right auf einige Werte, beispielsweise

padding-left: 15%; 
padding-right: 15%; 

Answer 3

Mein Verständnis ist, möchten Sie width auf der <h1> setzen und wollen auch jenseits dieser Breite eine background Leiste anzuzeigen. Technisch ist es nicht möglich, auf die Einführung eines neuen Tags zu verzichten. Es gibt jedoch Problemumgehungen, um ähnliche Ergebnisse zu erzielen.

Für die Demo-Zwecke habe ich sie auf verschiedene Hintergrundfarben eingestellt.

box shadow Verwendung

body {margin: 0;} 
 
h1 { 
 
    background-color: silver; 
 
    box-shadow: 0 -9999px 0 9999px grey; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}

<h1>The quick brown fox jumps over the lazy dog</h1>

einen Pseudoelement

body {margin: 0;} 
 
.container { 
 
    overflow: hidden; 
 
} 
 
h1 { 
 
    background: silver; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
h1:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: grey; 
 
}

<div class="container"> 
 
    <h1>The quick brown fox jumps over the lazy dog</h1> 
 
</div>

Verwendung