Capitaliser la première lettre des phrases CSS

Question

Je souhaite mettre en majuscule la première lettre de phrases, ainsi que la première lettre après des virgules, si possible. Je veux ajouter le code ici: 

.qcont {
    width: 550px;
    height: auto;
    float: right;
    overflow: hidden;
    position: relative;
}

Answer 1

Vous pouvez mettre la première lettre de l'élément .qcont en majuscule en utilisant le pseudo-élément :first-letter.

.qcont:first-letter{
  text-transform: capitalize
}

Ceci est le plus proche que vous allez utiliser uniquement CSS. Vous pouvez utiliser javascript (en combinaison avec jQuery) pour envelopper chaque lettre qui suit une période (ou une virgule, comme vous le souhaitez) dans une span. Vous pouvez ajouter le même css que ci-dessus à cette span. Ou le faire en javascript tous ensemble.

Voici un extrait de l'approche css:

.qcont:first-letter {
  text-transform: capitalize
}

<p class="qcont">Word, another Word</p>

Answer 2

Cela ne peut pas être fait en CSS. La propriété text-transform ne fait aucune distinction en fonction du placement d'un mot dans le contenu et il n'y a pas de pseudo-élément pour sélectionner le premier mot d'une phrase. Vous aurez besoin d’avoir des éléments réels, dans le balisage, pour chaque phrase. Mais si vous pouvez le faire, vous pourriez probablement aussi bien changer les lettres initiales en majuscules dans le contenu proprement dit.

La mise en majuscule au début d'une phrase est une question d'orthographe et doit être effectuée lors de la génération du contenu, et non avec des suggestions stylistiques facultatives (CSS) ou avec un script côté client. Le processus de reconnaissance des limites d'une phrase est loin d'être trivial et ne peut généralement pas être effectué automatiquement sans une analyse syntaxique et sémantique complexe (par exemple, une abréviation se terminant par un point peut apparaître dans une phrase ou à la fin d'une phrase).

Answer 3

Si vous devez mettre la première lettre en majuscule dans un conteneur contenteditable, vous ne pouvez pas utiliser la propriété css. 

#myContentEditableDiv:first-letter {
    text-transform: capitalize;
}

parce que lorsque vous essayez de supprimer une lettre automatiquement, vous supprimez tout le texte contenu dans le contenteditable.

Essayez à la place l'exemple fourni par sakhunzai dans https://stackoverflow.com/a/7242079/6411398 Pour une solution efficace.