In maiuscolo prima lettera di frasi CSS

Question

Voglio scrivere in maiuscolo la prima lettera di frasi, e anche la prima lettera dopo le virgole, se possibile. Voglio aggiungere il codice qui:

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

Answer 1

È possibile utilizzare la maiuscola dell'elemento .qcont utilizzando lo pseudoelemento :first-letter.

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

Questo è il più vicino che otterrete usando solo css. Puoi usare javascript (in combinazione con jQuery) per racchiudere ogni lettera che arriva dopo un punto (o una virgola, come desideri) in un span. È possibile aggiungere lo stesso css come sopra a quello span. O fallo in javascript tutti insieme.

Ecco un frammento per l'approccio css:

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

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

Answer 2

text-transform:capitalize; sarà in maiuscolo la prima lettera di una frase, ma se si vuole fare anche per le virgole si dovrà scrivere alcuni javascript. Sono d'accordo con @BoltClock, però. Perché mai vorresti mettere in maiuscolo dopo una virgola?

Edit: Per motivi di lettori: text-transform:capitalize; sarà capitalizzare ogni parola di una frase, non il primo uno solo. È necessario utilizzare il selettore CSS :first-letter con il precedente.

Answer 3

Questo non può essere fatto in CSS. La proprietà text-transform non fa distinzione in base al posizionamento di una parola all'interno del contenuto e non esiste uno pseudoelemento per la selezione della prima parola di una frase. Avresti bisogno di avere elementi reali, in markup, per ogni frase. Ma se riesci a farlo, allora probabilmente potresti anche cambiare le lettere iniziali in maiuscolo nel contenuto vero e proprio.

La capitalizzazione all'inizio di una frase è una questione di ortografia e deve essere eseguita durante la generazione del contenuto, non con suggerimenti stilistici opzionali (CSS) o con script sul lato client. Il processo di riconoscere i limiti della frase è tutt'altro che banale e in generale non può essere eseguito automaticamente senza un'analisi sintattica e semantica complessa (ad esempio, un'abbreviazione che termina con un punto può apparire all'interno di una frase o alla fine di una frase).

Answer 4

Se avete bisogno di capitalizzare la prima lettera nel container contenteditable non è possibile utilizzare la proprietà CSS

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

perché quando si tenta di eliminare una lettera automaticamente si eliminerà tutto il testo contenuto nel contenteditable.

Provare invece l'esempio fornito da sakhunzai in https://stackoverflow.com/a/7242079/6411398 per una soluzione funzionante.