Cómo esconder texto que hace overflow con CSS

Como desarrolladores web, debemos desarrollar nuestros sitios para que quepan variables de texto con distintas longitudes. Tienes que estar seguro de que tu diseño se ve bien tanto si el visitante ha ingresado un nombre de usuario de 50 caracteres como si lo hace con uno de 5 caracteres. En el pasado, esto sólo era posible truncando el texto en el lado del servidor, o con Javascript, pero hoy podemos llevarlo a cabo solamente con CSS gracias a propiedades como max-width y text-overflow.

En este breve tutorial, voy a mostrar mi nueva técnica favorita para esconder texto que hace overflow con CSS. ¿Preparados? Pues vamos a ello...

La idea

Definiendo un max-width, un overflow:hidden y un pseudo elemento :after podemos lograr el efecto que deseamos. Esto es a lo que nos ayudará cada una de estas propiedades:

• El elemento aumentará su anchura libremente, hasta que llegue al valor fijado por el max-width
• En ese momento, todo el exceso de texto se ocultará gracias a la propiedad overflow: hidden.
• Para evitar que el texto se rompa en una nueva línea, utilizamos white-space: nowrap.
• Para crear una transición suave entre el texto y el color de fondo del elemento, vamos a utilizar un pseudo elemento :after. Este elemento contendrá un linear-gradient que irá del transparente al color de fondo. Este elemento lo colocaremos a la derecha del contenedor, y será visible sólo cuando el elemento se expanda.

Creo que esta técnica es mucho mejor que utilizar text-overflow:ellipsis, ya que el textose mostrará fidedignamente y combinará muy bien con el diseño de la página. Sin embargo, tendrás que implementar más líneas de CSS, y tendrás que 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

Lo primero que tenemos que hacer para crear nuestro ejemplo es escribir un par de 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>

El text input sólo es necesario con el fin de dar al visitante la posibilidad de cambiar el contenido fácilmente, de lo contrario tendrían que utilizar herramientas para desarrolladores en su navegador. El elemento que tiene la técnica del overflow aplicada, es el span #elem. Le he puesto de nombre de clase overflow-300, la cual vamos a utilizar para implementar la técnica en nuestro CSS.

assets/css/styles.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 un max-width en un elemento que tiene un display:inline (el display por defecto de los elementos span). Para ello es necesario que en la propiedad display le asignemos el valor 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 quieres cambiar el max-width del elemento, también es necesario que modifiques el valor de la izquierda del elemento :after.

Por último, implementamos un poco de jQuery para detectar el evento de introducción de texto en el input text y actualizar así, el contenido del span:

assets/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 técnica para esconder texto que hace overflow con CSS está completa. Esperamos que te haya servido y que sepas aplicarla en tus propios proyectos.

Fuente: tutorialzine.com