Técnica para ocultar texto con jquery y javascript

Esta técnica servirá mucho a los programadores que deseen ocultar texto con jquery y javascript , para este ejemplo utilizaremos un input y cuando el usuario ingrese algún tipo de dato , el texto que desborda se irá ocultando utilizando un estilo css…

Las propiedades css que nos ayudarán en este desarrollo serán las propiedades css max-width y text-overflow , al ingresar caracteres de más este realizará un efecto de desvanecimiento su ancho y su alto no se verá afectado gracias a las propiedades que se van a utilizar…

Archivos a utilizar:

index.html

jQuery.js

script.js

estilo.css

Index.html 

<input type="text" value="Este texto se expandirá" />
<h2><span id="efecto" class="overflow-300"></span> aqui veremos su efecto. </h2>

estilo.css mostraremos un estilo para el input y el efecto para cuando el contenido empiece a desbordarse despues del ancho maximo de 300pixeles..

input[type=text]{
	display: block;
	margin: 40px auto;
	width: 300px;
	height: 30px;
	font: inherit;
	line-height: 1;
	text-align: left;
	padding: 3px 16px;
	border-radius: 2px;
	border: 1px solid #CCC;
	box-shadow: 0 1px 1px #DDD;
}

h2{
	text-align:center;
	color:#555d6e;
	font-weight:normal;
}

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

.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));
}

javascript.js su id efecto se refleja en el css desvaneciendo el texto.

$(function(){

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

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

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

jQuery.js podrás usar sus hosted cdn o descargarlo desde su web

Consulta como usar jquery en tu web aquí

Espero les sirva en algún proyecto suerte….

Demostración

Relacionado