Hiding overflowing text

Hiding overflowing text

by Nirvanachain

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>

<a href="http://tutorialzine.com/2014/02/technique-hiding-overflowing-text/" target="_blank">Helpful Article</a>

<!-- Helpful Article:
http://tutorialzine.com/2014/02/technique-hiding-overflowing-text/
-->

CSS

h2 span {
    /* We cannot set a width or max-width on an element which uses display:inline. This means we use display:inline-block */
    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;
    top: 0;
    margin-left: -40px;
    width: 40px;
    height: 100%;
    background:linear-gradient(
        to right, 
        rgba(240, 244, 245, 0), 
        rgba(240, 244, 245, 1)
        );
}

JavaScript

$(function () {
    
    var $elem = $('#elem'),
        $textbox = $('input[type=text]');
    
    $textbox.on('input', function () {
        $elem.text($textbox.val()); 
    });
    
    $textbox.trigger('input');
});