css text-overflow

css:

<style>
.box {  
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
.box:hover { /* show text on hover */
    white-space: normal;
    background: #ffa;
}
</style>

html:

<div class="box">
    <strong>Hover to see all text.</strong>
    The quick brown fox jumps over the lazy dog.
    Brick quiz whangs jumpy veldt fox!
    Quick wafting zephyrs vex bold Jim.
    Sphinx of black quartz judge my vow!
    The five boxing wizards jump quickly.
</div>‚Äč

Leave a Reply

Your email address will not be published. Required fields are marked *