Comment puis-je styliser uniquement le premier mot de chaque paragraphe en CSS ?

Obtenir un style de texte précis : cibler le premier mot en CSS

Vous cherchez à améliorer le premier mot de chaque paragraphe dans le "#content " div, lui donnant une taille de police distincte de 14 pt. Explorons les possibilités d'y parvenir uniquement via CSS.

Limites CSS

Malheureusement, CSS ne dispose pas d'un pseudo-élément intégré spécifiquement conçu pour sélectionner le premier mot. Les tentatives d'utilisation de ":first-letter" ou ":first-line" à cette fin ne donneront pas le résultat souhaité.

Approche alternative : JavaScript

Malgré le limitations du CSS, JavaScript peut apporter une solution. Pensez à utiliser un extrait de code tel que celui fourni dans la réponse :

<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>

Mise en œuvre

1. Incluez ce code JavaScript dans votre document HTML ou associez un fichier JavaScript externe le contenant.
2. Ajustez le sélecteur "#content" dans le code pour qu'il corresponde à l'ID de votre div spécifique ou class.

Conclusion

Bien que CSS ne prenne pas en charge directement le style du premier mot, JavaScript offre une alternative viable. En tirant parti de ses capacités, vous pouvez obtenir un style de texte précis qui englobe le premier mot de chaque paragraphe de votre div spécifié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!