Durchgestrichener Text mit Fließbreite

Question

Ich habe mich schon länger an ein Problem gehalten. Ich habe ein h1 Element, um das ich eine Zeile brauche. Gefällt mir: ----- Text -----

Der Hintergrund der Seite ist ein Bild, also kann ich nicht einfach eine Hintergrundfarbe auf meinem h1 Element verwenden, um meinen Text zu verstecken.

Ich schaffte es, das Ergebnis mit einer Tabelle mit drei Spalten zu erhalten, aber ich muss eine Breite für die Center-Zelle festlegen, damit es funktioniert.

Ist es möglich, es mit einer dynamischen Breite zu arbeiten?

Vielen Dank im Voraus.

Answer 1

Schließlich habe es mit Javascript, ich normalerweise nicht mag es zu verwenden, wenn ich es vermeiden kann, aber ich könnte einen anderen Weg und mein Code nicht verstehen sauberer. Habe einfach eine normale hn mit einer Klasse benutzt, die von jQuery erkannt wird. Dann: - Der Titel wird angezeigt: Inline-Block, auf diese Weise ist der Block nur so breit wie es Inhalt ist und ich kann die Breite später nicht verwenden. - Der Titel wird zurückgestellt mit align zu blockieren: center - Der Titel durch ein neues div gewickelt ist - ich schaffen zwei neue div, die um den Titel platziert werden nach der Berechnung, was whidth es

Answer 2

Ich würde in der Verwendung der CSS-Pseudo-Elemente aussehen: vor und: nach, um die Zeile auf beiden Seiten des Textes hinzuzufügen.

so etwas wie dies funktionieren könnte, aber Sie werden um spielen:

.textWithLine:before { 
    display:block; 
    content: ""; 
    float:left; 
    width: 300px; 
    height: 1px; 
    background: #000; 
    margin:5px; 
} 
.textWithLine:after { 
    display:block; 
    content: ""; 
    float:right; 
    width: 300px; 
    height: 1px; 
    background: #000; 
    margin: 5px; 
}​ 

Wenn Sie, dass in einem Behälter mit einem Überlauf auf verborgen, und text-align Zentrum verwenden waren, die Arbeit sortieren würde dynamisch, aber Sie müssen ein Spiel haben, um es perfekt zu machen.

Answer 3

Danke für Ihre Antwort. Scheint wie eine gute Idee, aber ich kann nicht herausfinden, wie die zwei addierten Blöcke aus dem übergeordneten Block zu überschreiten. Das Ergebnis ist der folgende: Nach dem Block unter dem Titel geschoben werden.

Hier ist mein Code:

<div class="titre_bloc2"> 

    <h1>Title</h1> 

</div> 


.titre_bloc2 
{ 
position:absolute; 
height:30px; 
text-align:center; 
width:100%; 
overflow:hidden; 
} 
.titre_bloc2 h1 
{ 
border:1px solid white; 
text-align:center; 
display:inline-block; 
} 
.titre_bloc2 h1:before 
{ 
width:300px; 
height:20px; 
border:1px solid blue; 
float:left; 
display:block; 
content: "test"; 
} 
.titre_bloc2 h1:after 
{ 
width:300px; 
height:20px; 
border:1px solid blue; 
float:right; 
display:block; 
content: "test"; 
} 

Answer 4

verwenden sollte ich das hatte dieselbe Frage, aber die meisten Antworten, die ich fand, passten nicht zu dem, was ich brauchte, bis ich CSS technique for a horizontal line with words in the middle fand.

Diese Lösung verwendet kein JS und funktioniert in nahezu jeder Situation. Ich hoffe es hilft.

***** Bearbeiten ***** Hier ist der Code, den ich für mein Projekt verwendet habe. Wenn Sie interessiert sind, können Sie das Endergebnis unter jtslegal.com sehen. Ich habe es für die Titel aller Sidebar-Widgets verwendet.

<div id="widget_title">Request a Call</div> 

#widget_title { overflow: hidden; padding: 10px 26px 0; } 
#widget_title:after, #widget_title:before { 
    content: ''; 
    display: inline-block; 
    height: 1px; 
    width: 100%; 
    margin: 0; 
    background: #999; 
    text-indent: 20px; 
    position: relative; 
    vertical-align: middle; 
} 
#widget_title:after { 
    left: .5em; 
    margin-right: -100%; 
} 
#widget_title:before { 
    right: .5em; 
    margin-left: -100%; 
}