Display primera letra única

Digamos que este marcado:Display primera letra única

<div id="socialMedia"> 
    <a class="Twitter">Twitter</a> 
</div>

Lo que quiero es solamente sea visible la primera letra del texto (en este caso, sólo una T)

(En realidad he ganado 't terminar con ella, pero tengo curiosidad sobre esto; seguro puede helpfull más adelante)

Así que este fue mi intento:

#socialMedia .Twitter{ 
    display:none; 
} 
#socialMedia .Twitter:first-letter { 
    display: block !important; 
}

Pude comprobar que no lo conseguiría. La pregunta es por qué? y hay algo de trabajo alrededor de esto?

operación -Editar-

Estamos en busca de IE = + versión 7/8 soluciones capaces ..

Salut

Fuente

2012-07-16 Toni Michel Caubet

Por cierto, este es pseudo-elemento o pseudo-clase o? –

Lo que estás haciendo es como ocultar un elemento padre e intentar mostrar uno de sus hijos, no funcionará porque el estilo del padre lo reemplaza. El elemento padre también tiene que ser un elemento de nivel de bloque para que funcione. Como una etiqueta 'div' o' p', o 'display: block' en la etiqueta' a'. – sachleen

@sachleen color, tal vez?(VS transparente personalizado) –

Editar: Descargo de responsabilidad: esto no funciona de acuerdo a los comentarios. No lo use como está sin verificar que se ajuste a sus necesidades.

Si marca la especificación para el pseudo-elemento :first-letter, se dará cuenta de lo siguiente:

El: first-letter pseudo-elemento debe seleccionar la primera letra de la primera línea de un bloque , si no está precedido por ningún otro contenido (como imágenes o tablas en línea) en su línea.

La palabra importante aquí es "bloquear".

Está tratando de usar el pseudo-elemento en una etiqueta <a/> con clase de Twitter. Por defecto, las etiquetas de anclaje son elementos en línea (no elementos de nivel de bloque).

Por su margen de beneficio determinado, una solución a su problema sería el estilo del anclaje de esta manera:

.Twitter { 
    display:block; 
    visibility:hidden; 
} 

.Twitter:first-letter { 
    visibility:visible; 
}

No estoy seguro exactamente lo que vas a, pero que es lo suficientemente bueno para fines experimentales . Vea una demostración aquí: http://jsfiddle.net/H7jhF/.

Fuente

2012-07-16 22:32:04

Hola, gracias por escribir, esto no funciona para mí en la última versión de FF ... –

Hm, eso es extraño. La especificación en 'visibility: hidden' dice" los descendientes del elemento serán visibles si tienen 'visibility: visible' "(http://www.w3.org/TR/CSS2/visufx.html#visibility). Voy a mirar un poco y ver si descubro el problema. Tenga en cuenta que esta sigue siendo una solución tonta porque la propiedad 'visibility' no elimina la casilla del elemento. –

Esto funciona en Chrome, pero no IE9 por alguna razón. Microsoft dice que es compatible, pero ese no parece ser el caso. http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx –

Lo que está haciendo es como esconder un elemento padre y tratando de mostrar uno de sus hijos, no funcionará porque el estilo de los padres lo anula. El elemento padre también tiene que ser un elemento de nivel de bloque para que funcione. Como una etiqueta div o p, o display: block; en la etiqueta a.

aquí hay algo usando los colores:

HTML

<div id="socialMedia"> 
    <a class="Twitter">Twitter</a> 
</div>

CSS

body { 
    background-color:#FFF; 
} 
.Twitter{ 
    display: block; 
    color:#FFF; 
} 
.Twitter:first-letter { 
    color:#000; 
}

Fuente

2012-07-16 21:49:06 sachleen

Estaba a punto de publicar algo en esta línea. Aquí hay una pequeña demostración: http://jsfiddle.net/H7jhF/. Además, para OP, consulte la especificación cuando crea que algo que debería funcionar no funciona (en este caso: http://www.w3.org/TR/CSS2/selector.html#first-letter) –

@tjeezy ah sí, estaba buscando visibilidad, pero no funcionó, pero aún no había descubierto el bloque de visualización. Deberías publicar eso como una respuesta, ya que es mejor que la mía. – sachleen

Tu respuesta fue buena, sin embargo. Oh, bueno, yo presenté uno también. –

Por qué no sólo tiene que utilizar JavaScript y dividir la cadena en una matriz y utilizar el primer elemento de la matriz. O charAt()

Fuente

2012-07-16 21:53:52 Sokies

Sí, bueno, quería saber si es posible con CSS sin ancho y esas cosas ... –

intentar algo como esto:

.Twitter { 
 
    font-size: 0; 
 
} 
 

 
.Twitter:first-letter { 
 
    font-size: 12px; 
 
}

<div class="Twitter">Twitter</div>

Tal vez esta no es la mejor solución, pero funciona.

Fuente

2013-09-03 08:37:39

Utilicé jsfiddle de @jejezy (http://jsfiddle.net/H7jhF/89/) y lo edité para usar el tamaño de fuente que usted propuso y también establecerlo en un bloque en línea para que otro elemento pueda fluir después de él. En resumen, prefiero usar el tamaño de letra. – Robert

Las respuestas de CSS puro utilizan visibilidad y trucos de color para ocultar las letras restantes, pero siguen presentes y afectan al diseño. Podría causar problemas de diseño, p. si desea flotar el elemento y poner algo al lado.

Encontré una manera divertida de hacer esto sin elementos ocultos. El truco es reducir toda la palabra a casi nada y luego volar solo la primera letra. Es un poco como OP intentaba hacer, pero funciona porque está operando en un espectro continuo en lugar de display: none que simplemente apaga cualquier cosa dentro de él. (Una especie de análogo> Situación digital.)

Demo

HTML:

<div>Ding Dong</div> and other stuff

CSS:

div { 
    font-size: 0.0000016px; 
    float: left; 
} 

div::first-letter { 
    color: red; 
    font-size: 10000000em; 
}

Resultado:

Fuente

2014-11-01 01:53:54 mahemoff

disparar el contenido de la página y mostrar la letra con contenido dinámico:


.twitter{ 
    text-indent:-9999px; 
    display:block; 
    position:relative; 
} 
.twitter:before,.twitter::before{ 
    content:"T"; 
    position:absolute; 
    width:10px; 
    height:15px; 
    z-index:100; 
    text-indent:9999px; 
}

en juego en este violín:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Fuente

2014-11-01 02:10:01 albert

Otra forma es utilizar color: transparent

.twitter{ 
 
    display: block; 
 
    color: transparent; 
 
} 
 

 
.twitter:first-letter{ 
 
    color: #000; 
 
}

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div>

JSFiddle

Sin embargo, esto no va a funcionar para LTE IE8.

Referencias:

Fuente

2016-04-20 22:09:51 Vucko

Esto es lo que hago:

.Twitter{ 
     display:block; 
     width:1ch; 
     overflow:hidden; 
     white-space: nowrap; 
    }

Fuente

2016-11-06 12:58:49 Nikolay

Respuesta

Cuestiones relacionadas