KOMPOOS.NL

text-overflow ellipsis

home » manuals » css » text-overflow-ellipsis.html

standaard ellipsis pagina | Mozilla ellipsis pagina

voorbeeld van text-overflow:ellipsis

text overflow
een voorbeeld hoe het werkt
met text overflow ellipsis
het afbreken van de tekst
gebeurt altijd correct

uitleg van het ellipsis "gebeuren"

Bijna alle browsers kunnen overweg met text-overflow:ellipsis. In het kader van progressive enhancement kan deze css-code gebruikt worden. Het enige wat de parameter ellipsis teweeg brengt, is dat als er meer tekst staat dan wat in (b.v.) een kader past, er drie puntjes worden weergegeven voordat de tekst afgebroken wordt. Gebruik de onderstaande css- en html-code om een voor jou nuttige toepassing te maken.

stylesheet voor text-overflow:ellipsis


<style type="text/css">
        .text_overflow_ellipsis ul li{
                width:120px;
                border-left:outset 12px #0000ee;
                padding:0.2em 0.3em 0.2em 0.4em;
                text-overflow:ellipsis; 
                overflow:hidden; 
                white-space:nowrap}
        .text_overflow_ellipsis ul li:hover{
                width:220px}
</style>

de - voorbeeld - html code


<div class="text_overflow_ellipsis">
        <ul>
                <li>text overflow</li>
                <li>een voorbeeld hoe het werkt</li>
                <li>met text overflow ellipsis</li>
                <li>het afbreken van de tekst</li>
                <li>gebeurt altijd correct</li>
        </ul>
</div>

het mozilla ellipsis probleem

Voor het Mozilla ellipsis-probleem is een aparte pagina gemaakt.