css - truncar - ¿Es posible cambiar la altura del texto en línea, no solo la altura de la línea?

texto en movimiento en html

Question

Me pregunto si es posible cambiar la altura del texto en línea, sin estirar la fuente y sin cambiar la altura de la línea en css.

Se produce un problema cuando tengo enlaces de varias líneas con un efecto de desplazamiento: cuando se pasa el ratón sobre las líneas, el efecto se enciende y se apaga debido al aumento de la altura de la línea: Example

Hay otra manera de hacer esto?

Answer 1

Hay una propiedad que aún no se ha mencionado que puede ayudar a cambiar la altura de una fuente ... el único problema es que tiene un soporte abismal.

La propiedad a la que me refiero es la propiedad CSS de font-size-adjust .

MDN tiene esto que decir :

La propiedad de CSS de font-size-adjust tamaño de fuente especifica que el tamaño de fuente debe elegirse en función de la altura de las letras minúsculas en lugar de la altura de las letras mayúsculas. Esto es útil ya que la legibilidad de las fuentes, especialmente en tamaños pequeños, está determinada más por el tamaño de las letras minúsculas que por el tamaño de las letras mayúsculas.

Como mencioné el apoyo es horrible . A partir de esta publicación, Firefox es el único navegador que lo admite. A partir de la versión v43 de Chrome, se puede habilitar en el indicador de características de la plataforma web experimental.

Answer 2

No puedes cambiar la altura de la fuente usando CSS, pero lo que puedes hacer es hacer que se vea más alto

• reducir letter-spacing ( Nota : puede usar el letter-spacing negativo si lo necesita).
• reduciendo font-weight
• y aumentando font-size

Answer 3

Puede aumentar la altura de la fuente usando css abajo

transform:scale(2,3); /* W3C */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-moz-transform:scale(2,3); /* Firefox */
-ms-transform:scale(2,3); /* IE 9 */
-o-transform:scale(2,3); /* Opera */

JSFIDDLE

Answer 4

Puede aumentar la altura utilizando transform: scale (3,5) La altura depende del segundo parámetro de transform: scale

<div>
<span>Text</span>  
</div>

div {
text-align:center;
 }

span
{    
display:inline-block;
transform:scale(3,5); 
-webkit-transform:scale(3,1); 
}

http://codepen.io/smarty_tech/pen/ZWvWav

Answer 5

Puede aumentar la altura, el ancho de un texto usando la propiedad transformar. Por ejemplo: transformar: escala (0.7, 1.0);

1. El primer valor dentro de la propiedad de escala cambia el ancho de la letra / texto.
2. Y el segundo valor cambia la altura de la letra / texto.

 **h1 {
    font-size: 60px;
    transform: scale(0.7, 1.0);
    margin-left: -90px 
}**

Utilicé margen para alinear el texto.

Nota: siempre es una buena práctica utilizar los prefijos de proveedores

• -webkit- (Chrome, Safari, versiones más recientes de Opera).
• -Mez- (Firefox)
• -o- (Versiones antiguas de Opera)
• -ms- (Internet Explorer)

Ejemplo : -webkit-transform: scale (0.7, 1.0);

Answer 6

También puedes intentar disminuir el letter-spacing . Hacer el tipo un poco más ajustado puede hacer que parezca más alto en relación con su ancho.

Answer 7

http://www.css3.com/css-font-stretch/

Este comando te ayudará a resolver el problema.

¡Esto te ayudara!

Answer 8

No podrá cambiar la altura de la fuente solo, pero puede ajustar el font-size la font-size para que funcione con la altura de línea que ha establecido.