JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<p>The CHAGAN Method: it's always been my dream to have a method named after me. Fingers crossed this catches on ;) </p>
<h1>A "pure" css solution for multiline ellipsis behavior.</h1>
<h2>DEMO:</h2>
<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>
<p> 
    Even more text to see if we can get this stuff to flow nicely. The container above should collapse and this text should shift up along with it. 
</p>
<h2>Known issues:</h2>
<ul>
    <li>It cuts letters in half. Probably no solution to this. As a programmer I preffer this. More design oriented folks may hate it... yay justified text?</li>
    <li>Due to the width of the lines being set based on the content and the content not actualy changing it doesn't seem to cause a reflow on resize. I've included a js function to handle trigger reflow (requires underscore cause I don't want to write my own throttle code).</li>
    <li>amount of lines can't be controlled by css. .line(num) class...

CSS

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}
/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

JavaScript

//yes there is JS over here but TECHINICALLY its just causeing the browser to redraw the content it should be redrawing... assuming I understand this correctly. 



//There is probably a better redraw function but this worked. This is only really neccesary if you want people to be able to resize the window... which in reality isn't a very common thing for users to do. I think..


var $wrapper = $('#wrapper'),
    $lastLine = $wrapper.find("li:last"),
    redraw = _.throttle(function(){
        console.log("redraw");
        $lastLine.hide();
        setTimeout(function() {
            $lastLine.show();
        }, 0);
    }, 10);

$(window).on("resize", function(){
    redraw();
});