Majuscule première lettre des phrases CSS
je veux capitaliser la première lettre des phrases, et aussi la première lettre après les virgules si possible. Je tiens à ajouter le code ici:
css prettyprint-override">.qcont {
width: 550px;
height: auto;
float: right;
overflow: hidden;
position: relative;
}
4 réponses
vous pouvez capitaliser la première lettre du .qcont élément en utilisant le pseudo-élément :first-letter.
.qcont:first-letter{
text-transform: capitalize
}
C'est le plus proche que vous obtiendrez en utilisant seulement css. Vous pouvez utiliser javascript (en combinaison avec jQuery) pour envelopper chaque lettre qui vient après une période (ou la virgule, comme vous le souhaitez) dans un span. Vous pouvez ajouter le même css que ci-dessus pour que span. Ou de le faire en javascript tous ensemble.
voici un extrait pour la css approche:
.qcont:first-letter {
text-transform: capitalize
}<p class="qcont">word, another word</p>cela ne peut pas être fait en CSS. text-transform propriété ne fait aucune distinction selon l'emplacement d'un mot dans le contenu, et il n'y a aucun pseudo-élément pour sélectionner le premier mot d'une phrase. Vous auriez besoin d'avoir des éléments réels, dans le balisage, pour chaque phrase. Mais si vous pouvez faire cela, alors vous pourriez probablement tout aussi bien changer les lettres initiales en majuscules dans le contenu propre.
Capitalisation au début d'une phrase est une question d'orthographe et de doit être fait lors de la génération du contenu, pas avec des suggestions facultatives de style (CSS) ou avec le client-côté scripting. Le processus de reconnaissance des frontières des phrases est loin d'être anodin et ne peut en général être réalisé automatiquement sans une analyse syntaxique et sémantique complexe (par exemple, une abréviation se terminant par une période peut apparaître à l'intérieur d'une phrase ou à la fin d'une phrase).
si vous devez capitaliser la première lettre dans un conteneur contenteditable, vous ne pouvez pas utiliser la propriété CSS
#myContentEditableDiv:first-letter {
text-transform: capitalize;
}
parce que quand vous essayez de supprimer une lettre automatiquement vous supprimez tout le texte contenu dans le contenteditable.
Essayez plutôt l'exemple fourni par sakhunzai https://stackoverflow.com/a/7242079/6411398 pour une solution de travail.
text-transform:capitalize; va capitaliser la première lettre d'une phrase, mais si vous voulez aussi le faire pour des virgules, vous devrez écrire du javascript. Je suis d'accord avec @BoltClock, cependant. Pourquoi diable voudriez-vous capitaliser après une virgule?
Edit: Pour l'amour de lecteurs: text-transform:capitalize;capitaliser chaque mot d'une phrase, et non pas uniquement le premier.
Vous devez utiliser le :first-letter sélecteur CSS avec ce qui précède.