CSS-Symbol mit: vor Text aus Umbruch unter

Question

halten

Ich habe ein Symbol mit :before platziert und der Text folgt manchmal um zwei oder drei Zeilen. Wenn es umgebrochen wird, geht der Text unter das Symbol.

Ich bin auf der Suche nach CSS-Hilfe, um den Text vom Umbruch unter dem Symbol zu halten.

Hier zeigt ein Bild, was ich mich beziehe:

Aktuelle CSS:

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before { 
    content: "\f1c1"; 
    font-family: 'FontAwesome'; 
    color: #999; 
    display: inline-block; 
    margin: 0px 10px 0 0; 
    font-size: 24px; 
    vertical-align: middle; 
} 
.form-title:before { 
    float: left; 
} 

Hier ist eine Geige mit meinem Code: fiddle

Answer 1

a[href $='.pdf']:before /*etc...*/ { 
 
    content: "\f1c1"; 
 
    font-family: 'FontAwesome'; 
 
    color: #999; 
 
    margin: 0px 10px 0 0; 
 
    font-size: 24px; 
 
    float: left; 
 
} 
 
.form-title span {    /* WRAP TEXT IN SPAN */ 
 
    display: block; 
 
    overflow: hidden; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 

 
<div style="width:220px/*DEMOONLY*/;"> 
 
    <a href="/xxx.pdf" class="form-title"> 
 
    <span>xxxxx - CO Private Passenger Auto Insurance (Summary Disclosure Notice)</span> 
 
    </a> 
 
</div>

Answer 2

einfache Lösung macht Ihr Text in einem Absatz (oder zuweisen Sie Ihre eigene Klasse, was Sie bevorzugen) und dann können Sie verwenden Dies.

p{ 

overflow: hidden; 

} 

Dies stoppt den Textumbruch unter dem Bild.

Wenn Sie eine bestimmte Höhe oder Breite auf einer Box festlegen und der Inhalt darin nicht passen kann, müssen Sie angeben, wie diese behandelt werden soll. Das ist, wo die css Überlauf Eigenschaft hereinkommt.

Answer 3

Die einzige Weise mit dem gegenwärtigen html würde sein, Auffüllen der a Elemente und absolute Position das Symbol auf der linken Seite.

a.form-title[href $='.pdf']:before, 
a.form-title[href $='.PDF']:before, 
a.form-title[href $='.pdf#']:before, 
a.form-title[href $='.PDF#']:before, 
a.form-title[href $='.pdf?']:before, 
a.form-title[href $='.PDF?']:before{ 
    position:absolute; 
    left:0; 
} 
a.form-title[href $='.pdf'], 
a.form-title[href $='.PDF'], 
a.form-title[href $='.pdf#'], 
a.form-title[href $='.PDF#'], 
a.form-title[href $='.pdf?'], 
a.form-title[href $='.PDF?']{ 
    position:relative; 
    display:inline-block; 
    padding-left:35px; 
    } 

Demo bei https://jsfiddle.net/x0yyfxmm/3/

Answer 4

Ihre :before pseudo-Elemente schweben sind, so was Sie sehen, ist die natürliche Verpackung von Text um einen Floats. Um dieses Umbrechen zu verhindern, müssen Sie die Positionierung Ihrer Pseudoelemente ändern.

Da Ihr Symbol eine feste Höhe und Breite hat, wissen Sie, warum fügen Sie Ihren Anker-Tags keine Polsterung hinzu und positionieren Sie das Symbol absolut? Auf diese Weise verhindert die Auffüllung, dass der Text umbrochen wird und das Symbol wird genau dort platziert, wo Sie es haben möchten.

a[href $='.pdf'], a[href $='.PDF'], a[href $='.pdf#'], 
a[href $='.PDF#'], a[href $='.pdf?'], a[href $='.PDF?'] { 
    display: inline-block; 
    padding-left: 30px; /* 20px icon width + 10px margin */ 
    position: relative; 
} 

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, 
a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before { 
    content: "\f1c1"; 
    font-family: 'FontAwesome'; 
    color: #999; 
    font-size: 24px; 
    vertical-align: middle; 
} 

.form-title:before { 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

And, here's your updated Fiddle showing that code in action.