JSFiddle - React, Tailwind, and code Playground

by webshooter

HTML

<html>
<head>
<style>
    div {
        margin:10px;
        width:200px;
        max-width:200px;
        font-size:1.2em;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    div.a:hover, span:hover {
        color:#666;
        cursor:pointer;
    }
    span {
        display:inline-block;   
    }
</style>
</head>
<body>

    <!-- This works well for long filenames -->
    <div class="a">
        ThisIsMyReallyReallyLongFilename.txt
    </div>

    <!-- ... but fails for the short names -->
    <div class="a">
        Shortname.txt
    </div>

    <!-- This fails to show ellipse for long filenames -->
    <div>
        <span>ThisIsMyReallyReallyLongFilename.txt</span>
    </div>

    <!-- ... but wraps the text nicely for short names -->
    <div>
        <span>Shortname.txt</span>
    </div>

</body>
</html>