Wie kann ich in CSS nur das erste Wort jedes Absatzes formatieren?

Erzielen eines präzisen Textstils: Ausrichtung auf das erste Wort in CSS

Sie versuchen, das erste Wort in jedem Absatz innerhalb des „#content“ hervorzuheben " div, was ihm eine eindeutige Schriftgröße von 14pt verleiht. Lassen Sie uns die Möglichkeiten erkunden, dies allein durch CSS zu erreichen.

CSS-Einschränkungen

Leider fehlt CSS ein integriertes Pseudoelement, das speziell auf die Auswahl des ersten Wortes zugeschnitten ist. Versuche, „:first-letter“ oder „:first-line“ für diesen Zweck zu verwenden, führen nicht zum gewünschten Ergebnis.

Alternativer Ansatz: JavaScript

Trotzdem Einschränkungen von CSS, JavaScript kann eine Lösung bieten. Erwägen Sie die Verwendung eines Codeausschnitts wie dem in der Antwort bereitgestellten:

<script>
var elements = document.querySelectorAll("#content p");
for (var i = 0; i < elements.length; i++) {
var firstWord = elements[i].textContent.split(" ")[0];
elements[i].innerHTML = elements[i].innerHTML.replace(firstWord, "<span>

Implementierung

1. Fügen Sie diesen JavaScript-Code in Ihr HTML-Dokument ein oder verlinken Sie ihn externe JavaScript-Datei, die es enthält.
2. Passen Sie den „#content“-Selektor im Code so an, dass er mit der ID Ihres spezifischen Divs übereinstimmt oder Klasse.

Fazit

Während CSS keine direkte Unterstützung für die Gestaltung des ersten Wortes bietet, bietet JavaScript eine praktikable Alternative. Durch die Nutzung seiner Funktionen können Sie einen präzisen Textstil erreichen, der das erste Wort jedes Absatzes innerhalb Ihres angegebenen Abschnitts umfasst.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS nur das erste Wort jedes Absatzes formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!