ellipsis.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="./style/reset.css" />
        <link rel="stylesheet" type="text/css" href="./style/main.css" />
        <link rel="stylesheet" type="text/css" href="./style/ellipsis.css" />
    </head>
    <body>

    <h4 class="bold">Ellipsis:</h4>
    <h6 class="italic m-bottom10">Normal behavior:</h6>
    <div class="bc-yellow p10 m-left20 w400 overflow-hidden">
        Mauris non ante condimentum, rhoncus arcu eu, aliquet nisl. Nulla egestas mi ac efficitur volutpat. Vivamus ut urna ut magna interdum condimentum in id nunc. Aliquam eleifend metus eget sem placerat sollicitudin.
    </div>

    <h6 class="italic m-top20 m-bottom10">With ellipsis:</h6>
    <div class="bc-yellow p10 m-left20 w400 overflow-hidden t-ellipsis ws-nowrap">
        Mauris non ante condimentum, rhoncus arcu eu, aliquet nisl. Nulla egestas mi ac efficitur volutpat. Vivamus ut urna ut magna interdum condimentum in id nunc. Aliquam eleifend metus eget sem placerat sollicitudin.
    </div>

    <h6 class="italic m-top20 m-bottom10">Couple rows ellipsis:</h6>
    <div class="couple-rows bc-yellow p10 m-left20 w400">
        <span class="inline-block overflow-hidden t-ellipsis">
            Mauris non ante condimentum, rhoncus arcu eu, aliquet nisl. Nulla egestas mi ac efficitur volutpat. Vivamus ut urna ut magna interdum condimentum in id nunc. Aliquam eleifend metus eget sem placerat sollicitudin.
        </span>
    </div>

    <h6 class="italic m-top20 m-bottom10">Couple rows ellipsis (height: auto):</h6>
    <div class="couple-rows height-auto bc-yellow p10 m-left20 w400">
        <span class="inline-block overflow-hidden t-ellipsis">
            Curabitur nisi sapien, molestie sit amet cursus interdum, viverra in sem. Mauris in lorem ornare, auctor lectus quis, congue nisl. Vivamus semper nunc ut erat sollicitudin lacinia. Morbi justo diam, eleifend quis nunc ut, viverra fermentum dui. Aliquam rutrum pretium nisi, tempus condimentum ante sagittis ac. Aliquam vitae mi quis urna auctor elementum vel vel leo. Nunc vulputate mattis nunc. Etiam accumsan auctor aliquam.
        </span>
    </div>

    </body>
</html>