KOMPOOS.NL

text-overflow ellipsis (Mozilla)

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

standaard ellipsis pagina | Mozilla ellipsis pagina

voorbeeld van text-overflow:ellipsis

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

work around voor het mozilla ellipsis "probleem"

Zoals er al was voorspeld heeft mozilla ellipsis "aan de praat" gekregen. Het is het verstandigste om deze procedure niet meer te gebruiken, en gewoon jouw browser te upgraden naar de laatste versie. Zoals dat zo mooi heet:
PROBLEM SOLVED!

Alléén als het écht moet, is er deze workaround voor het Mozilla-ellipsis probleem. Je kan beter gewoon niets doen, omdat in latere Mozilla-vesie's de ellipsis ge-implementeerd zal worden. En dan kan je deze code weer overal gaan verwijderen. Buiten dat, is het nu niet de allergrootste ramp als een browser de overflow-ellipsis niet (goed) kan uitvoeren. De laatste reden om niet deze procedure te gebruiken is dat er teveel "exacte"parameters gebruikt moeten worden om de ellipsis "na te bootsen" (position:absolute etc. etc.).

heb ik jou niet kunnen overtuigen om het gewoon maar niet te doen, heb ik hieronder de aangepaste stylesheet staan. Voor het overige verwijs ik naar de standaard ellipsis-pagina.

aangepaste stylsheet voor de "mozilla 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}
        @-moz-document url-prefix() {
                .text_overflow_ellipsis ul>li:after{
                        content: "...";
                        position:absolute;
                        left:180px;
                        background:#fff}
                .text_overflow_ellipsis ul>li:hover:after{
                        content: "";
                        position:absolute;
                        left:180px;
                        background:transparent}
        }
</style>