Tengo dos span en un elemento dado, sin espacios entre ellos. Quiero poner en mayúscula la primera letra contenida en cada span. ¿Cómo haría esto?

En este JSFiddle estoy usando la regla text-transform, pero como ves, no funciona.

css
5
Michael Rader 5 ene. 2017 a las 12:08

4 respuestas

La mejor respuesta

Añadir display: inline-block

.first, .second {
    text-transform: capitalize; 
    display: inline-block;
}

Enlace al violín https://jsfiddle.net/9s2f1mrj/2/

12
pwolaq 5 ene. 2017 a las 09:15

Aquí hay una solución más usando pseudo ::first-letter. sin embargo

El pseudo-elemento ::first-letter tiene efecto solo en elementos con un valor de visualización de bloque , bloque en línea , celda de tabla , elemento de lista o título de tabla . En todos los demás casos, ::first-letter no tiene ningún efecto.

Entonces mi sugerencia es:

span {
  display: inline-block;
}
span::first-letter {
  text-transform: uppercase;
}
<span class="first">first</span><span class="second">second</span>
0
Banzay 5 ene. 2017 a las 09:41

El text-transform busca espacios. Como no tiene un carácter de espacio, no capitalizará el primer carácter, aunque esté en una nueva etiqueta. La razón es que las textContent de ambas etiquetas juntas no dan dos palabras, sino una.

Como solución alternativa para engañar al navegador, establecer span en inline-block hará que se considere como dos palabras:

.first, .second {display: inline-block;}

Lo anterior funciona.

.first, .second {
  text-transform: capitalize;
  display: inline-block;
}
<span class="first">first</span><span class="second">second</span>
9
Praveen Kumar Purushothaman 5 ene. 2017 a las 09:21

Esto debería hacer el truco para ti.

.first, .second {
    display: inline-block;
    text-transform: capitalize;
}

Espero que ayude !!

1
seemly 5 ene. 2017 a las 09:41