logo

Mi nueva técnica favorita para ocultar texto desbordado

Como desarrolladores web, debemos crear nuestros sitios para que se adapten a longitudes de texto variables. Debe asegurarse de que su marcado se vea tan bien con un nombre de usuario de 50 caracteres como con uno de 5 caracteres. En el pasado, esto solo era posible cortando el texto en el lado del servidor o con JavaScript, pero hoy en día solo podemos hacerlo con CSS gracias a propiedades como max-width y text-overflow.

En este breve tutorial, te mostraré mi nueva técnica favorita que desvanece el texto desbordado con gracia en el fondo.

La idea

Al establecer un max-width valor, overflow:hidden y un :after pseudo elemento, podemos lograr el efecto que puedes ver en la demostración. Esto es lo que cada uno de estos nos ayudará con:

  • El elemento aumentará su ancho libremente, hasta que llegue al valor establecido por max-width.
  • En ese momento, todo el texto sobrante se ocultará gracias al overflow:hidden propiedad.
  • Para evitar que el texto se divida en una nueva línea, usamos white-space:nowrap.
  • Para crear una transición suave entre el texto y el color de fondo del elemento, usaremos un :after pseudo elemento. Este elemento tendrá un linear-gradient que va desde transparente hasta el color del fondo. Este elemento se coloca a la derecha del contenedor y solo se vuelve visible cuando el elemento se expande.

Esta técnica me parece más atractiva que el simple text-overflow:ellipsis ya que se muestra más texto y se combina muy bien con el diseño de la página. Sin embargo, tiene el costo de que se necesitan más líneas de CSS y debe establecer manualmente el ancho máximo. En algunos casos, el esfuerzo extra vale la pena cuando el objetivo es un diseño más limpio.

El Código

Para preparar el escenario, primero debemos escribir algunas líneas de HTML:

index.html

<input type="text" value="This text will expand" />
<h2><span id="elem" class="overflow-300"></span> and this will shift to the side.</h2>

La entrada de texto solo es necesaria para que el visitante pueda cambiar el contenido fácilmente; de ​​lo contrario, tendría que usar las herramientas de desarrollo de su navegador. El elemento al que se le ha aplicado la técnica de desbordamiento es el #elem lapso. Le he dado una clase llamada overflow-300, que usaremos para implementar la técnica en nuestro CSS.

activos/css/estilos.css

h2 span{
    font-weight:bold;
    display:inline-block;
    vertical-align: top;
}

Una cosa a tener en cuenta es que no podemos establecer un width o max-width en un elemento que se establece en display:inline (la visualización predeterminada de los elementos de intervalo). Esto requiere que le demos una visualización de inline-block . Y aquí está la técnica en sí:

.overflow-300{
    overflow:hidden;
    max-width:300px;
    position:relative;
    white-space: nowrap;
}

.overflow-300:after{
    content:'';
    position: absolute;

    left:300px;
    margin-left: -40px;
    width: 40px;
    height:100%;
    top:0;
    background:linear-gradient(to right, rgba(240, 244, 245, 0), rgba(240, 244, 245, 1));
}

Si tuviera que cambiar el ancho máximo del elemento, también tendría que cambiar el valor izquierdo de :after elemento.

Por último, tenemos algo de jQuery que escuchará el evento de entrada de texto en el cuadro de texto y actualizará el contenido del intervalo:

activos/js/script.js

$(function(){

    var elem = $('#elem'),
        textbox = $('input[type=text]');

    textbox.on('input', function(){
        elem.text(textbox.val());
    });

    textbox.trigger('input');
});

¡Con esto, nuestra dulce técnica de desbordamiento de texto está lista! ¿Tiene sugerencias u otras técnicas útiles? Compártelas en la sección de comentarios.