poner - primera letra mayuscula css

Poner en mayúscula la primera letra de las oraciones CSS

Question

Quiero poner en mayúscula la primera letra de las oraciones, y también la primera letra después de las comas si es posible. Quiero agregar el código aquí:

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

Answer 1

Esto no se puede hacer en CSS. La propiedad de text-transform no hace distinción de acuerdo con la ubicación de una palabra dentro del contenido, y no hay pseudo-elemento para seleccionar la primera palabra de una oración. Necesitaría tener elementos reales, en el marcado, para cada oración. Pero si puedes hacer eso, entonces podrías cambiar las letras iniciales a mayúsculas en el contenido apropiado.

El uso de mayúsculas al comienzo de una oración es una cuestión de ortografía y debe hacerse al generar el contenido, no con sugerencias estilísticas opcionales (CSS) o con secuencias de comandos del lado del cliente. El proceso de reconocimiento de límites de oraciones está lejos de ser trivial y, en general, no puede realizarse automáticamente sin un análisis sintáctico y semántico complejo (por ejemplo, una abreviatura que termina con un período puede aparecer dentro de una oración o al final de una oración).

Answer 2

Puede escribir en mayúscula la primera letra del elemento .qcont utilizando el pseudo-elemento :first-letter .

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

Esto es lo más cerca que vas a usar solo CSS. Puede usar javascript (en combinación con jQuery) para envolver cada letra que viene después de un punto (o coma, como desee) en un span . Puede agregar el mismo CSS que el anterior a ese span . O hacerlo en javascript todos juntos.

Aquí hay un fragmento para el enfoque css:

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

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

Answer 3

Si necesita poner en mayúscula la primera letra en contenteditable contenedor no puede usar la propiedad css

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

porque cuando intentes eliminar una carta automáticamente, borrarás todo el texto que contenga.

Pruebe en su lugar el ejemplo proporcionado por sakhunzai en https://.com/a/7242079/6411398 para una solución funcional.

Answer 4

text-transform:capitalize; mayúscula la primera letra de una oración , pero si también quieres hacerlo para comas, tendrás que escribir algo de javascript. Estoy de acuerdo con @BoltClock, sin embargo. ¿Por qué demonios querrías capitalizar después de una coma?

Editar: Por el bien de los lectores: text-transform:capitalize; capitalizará cada palabra de una oración , no la primera solamente. Debe usar el selector de CSS de la :first-letter con lo anterior.