CSS :: first-letter-Auswahl Pausen Linie

Question

Abstand Wenn Sie den ersten Buchstaben größer ist als der Rest des Absatzes machen (wie in den Geschichten erzählen Bücher) den Abstand der ersten Zeilenumbrüche:

p::first-letter { 
    font-size: 250%; 
} 

https://jsfiddle.net/7zka3jsy/

Wie Sie sehen können, hat die erste Zeile einen größeren Platz als der Rest des Absatzes, weil der: first-letter sich nicht nur nach oben, sondern auch nach unten bewegt.

Answer 1

Sie können dies tun, indem Sie die richtigen line-height Einstellung und vertical-align für den ersten Buchstaben wie so:

p::first-letter { 
    font-size: 250%; 
    vertical-align: bottom; 
    line-height: .9em; 
} 

Fiddle here.

Oder einfach einige gelten Ordentlich dropcase buchartigen Styling wie so:

p::first-letter { 
    font-size: 250%; 
    float: left; 
    padding-right: 7px; 
    padding-bottom: 5px; 
} 

Fiddle here.

Answer 2

p::first-letter { 
    font-size: 250%; 
    line-height:.9; 
} 

Answer 3

nur hinzufügen line-height: 18px;-p Tag

p::first-letter { 
 
font-size: 250%; 
 
} 
 
p{ 
 
line-height:18px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque egestas gravida. In turpis tellus, blandit vel facilisis a, viverra vitae lectus. In vitae ullamcorper nulla, hendrerit condimentum tellus. Morbi purus sapien, convallis et facilisis non, ornare non ante. Morbi et sapien et ante tincidunt lobortis nec a dolor. Nunc id rutrum velit, quis tempor tortor. Suspendisse nec orci non tellus tempus feugiat et quis turpis. Etiam viverra lacus rhoncus dolor vestibulum, in dictum diam ultricies. Praesent urna nulla, finibus ut nulla at, scelerisque posuere nisi. Etiam faucibus turpis sit amet ipsum efficitur vestibulum. Phasellus sit amet ipsum vitae quam euismod ullamcorper. Fusce pellentesque tellus nisl, aliquet luctus est dignissim id. Sed sit amet erat non purus feugiat pretium sit amet sit amet dui. Aenean ligula mi, tincidunt tincidunt dui ac, auctor consequat ante. Proin vitae tincidunt tellus, quis mollis elit. 
 
</p>

Answer 4

Sie müssen die Position für den Anfangsbuchstaben mit der Pseudo-Klasse ersten Buchstaben angeben und dann einen beliebigen der Box-Modell-Stile wie Padding oder Rand zum HTML-Element hinzufügen.

Hier ist die aktualisierte

Updated JS Fiddle:https://jsfiddle.net/7zka3jsy/4/

Answer 5

Wie es der erste Buchstabe ist, und wird nie zu zwei Zeilen durchgehen, geben Sie einfach den line-height Wert 0 in der p::first-letter Pseudoklassenauswahl.

Beispiel

p::first-letter { 
    font-size: 250%; 
    line-height: 0; 
} 

Dies ermöglicht Ihnen den font-size Wert in der p::first-letter Pseudoklassenauswahl und/oder die font-size und line-height Werte (s) in den p Wählern unabhängig zu ändern. Der Wert line-height auf 0 garantiert konsistente Ergebnisse über verschiedene Browser-Rendering-Engines hinweg, während das Festlegen seines Werts auf einen anderen Wert (z. B. 0.9) nicht unbedingt erforderlich ist.

Überarbeitete Fiddle