text-overflow | Loop and Break

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis (Horizontal Ellipsis) or a Web author-defined string.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.test {
                white-space: nowrap;
                width: 12em;
                overflow: hidden;
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>
        <p>
            The following two divs contains a long text that will 
			not fit in the box. As you can see, the text is clipped.
        </p>
        <p>
            This div uses "text-overflow:ellipsis":
        </p>
        <div class="test" style="text-overflow:ellipsis;">
            This is some long text that will not fit in the box
        </div>
        <p>
            This div uses "text-overflow:clip":
        </p>
        <div class="test" style="text-overflow:clip;">
            This is some long text that will not fit in the box
        </div>
    </body>
</html>

Categories