Frage von ClaraRuppi, 21

HTML/CSS - Text als Zeitungsartikel darstellen?

Hallo zusammen,

ich würde gerne einen Text auf einer Webseite als Artikel darstellen wollen. Gemeint ist damit, dass in Zeitungsartikeln meistens der erste Buchstabe des Textes ziemlich groß geschrieben ist und der weitere Text da folgt. Das bedeutet, dass (meistens) 3 Zeilen des eigentliche Textes in dem Umfang des ersten Buchstabes umfängt.

Weiß wer wie ich dies mit HTML/CSS realisieren kann?

beispiel: http://downloads.psd-tutorials.de/Download/_userimages/Image/Matthias/images/InD...

Vielen Dank

Antwort
von medmonk, 13

HTML:

<p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Repudiandae illum id obcaecati 
quia perferendis at.</p>

CSS: 

p:first-letter {
  font-weight: bold;
  font-size: 5em;
  padding: 30px 10px 10px 0px;
  float: left;
}

Mit dem Pseudo-Element :first-letter kannst du die erste Glyphe selektieren und beinah beliebig formatieren. Gibt dieser einfach eine gewünschte Größe sowie ein float: left und sorge mit´Padding für genügend Abstand. 

LG medmonk 

Antwort
von tDoni, 13

https://css-tricks.com/almanac/selectors/f/first-letter/

Wie du es genau hinbekommst, dass der Buchstabe nicht "übersteht" kann ich dir aber auf die schnelle nicht beantworten.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten