Text-overflow ellipsis FF

[Verwijderd]

Hey

Ik zit al een tijdje te zoeken naar een oplossing voor als de tekst te lang is in een div, dat de laatste 3 passende letters worden vervangen door "...".
Door Google kwam ik erachter dat dit kon met : text-overflow:ellipsis, maar dit werkt alleen in IE en niet in FF.
Nu heb ik gezocht om deze code ook in FF te laten werken, kwam ik verschillende oplossingen tegen zoals : http://www.jide.fr/emulat...ipsis-in-firefox-with-css, maar ook deze poster heeft het nog niet goed werkend gekregen.
Nu weet ik dat Tweakers op de frontpage dit ook gebruikt, maar na lang zoeken in broncode kwam ik erachter dat er gebruik wordt gemaakt van javascript en volgens mij helemaal aangepast aan deze site(ben niet zo bekend met JS).

Weet iemand nu misschien een oplossing hoe ik dit werkend krijg in FF & IE?
Of weet iemand waar ik de JS code kan vinden,die niet is aangepast, waarmee dit gedaan kan worden?

Bvd!

edit:oplossing hoeft niet perse in CSS te zijn

[frickY]

Er is geen CSS alternatief voor FF.
Wel kun je met javascript de offsetWidth van een div bepalen en de inhoud ervan hier aan aanpassen.

De text-overflow: ellipsis is een feature van IE, geen standaard CSS.

[ Voor 23% gewijzigd door frickY op 07-07-2008 21:21 ]

[Verwijderd]

@hierboven : Oplossing hoeft niet perse in CSS te zijn.
Hoe gaat dat precies met die offsetWidth? Heb je misschien een werkend voorbeeld van dit?

[MuisM4t]

Je moet javascript of php gebruiken hiervoor , zoals al gezegd.

Zie PHP manual: substr voor de php oplossing.

[ Voor 3% gewijzigd door MuisM4t op 07-07-2008 21:29 ]

[Icelus]

[CSS] Tekst afbreken met '...'

[Verwijderd]

@MuisM4t , een script die het aantal letters telt zoek ik niet, want kijk het verschil, allebei 15 letters :

wwwwwwwwwwwwwww
en
iiiiiiiiiiiiiii


Dat moet ik niet hebben, dus de laatste 3 passende letters moeten vervangen worden door ...

@Icelus,
dat topic had ik al gevonden, staat geen bruikbare informatie tussen

[DiSiLLUSiON]

Iets als dit:

code:

var ellipsis = function(e) {
    var w = e.scrollWidth || e.offsetWidth || e.clientWidth;
    var s = e.innerHTML;
    var nl = Math.floor(w / 7.3);
    
    if (s.length > nl) {
        e.innerHTML = s.substr(0, nl) + '...';
    }
    
    return;
};

window.onload = function() {
    var a = document.getElementsByTagName('div');
    
    for (var i = 0, j = a.length; i < j; i++) {
        if (a[i].className.match(/ellip/i)) {
            ellipsis(a[i]);
        }
    }
    
};

past alle div's met een class 'ellip' aan.

Het is even snel in elkaar getikt; en dus ook zeker niet netjes of elegant (die 7.3 is bijvoorbeeld een arbitrary nummer, afhankelijk van de font grootte?), maar voor zover ik kan zien werkt het. Misschien kun je er wat mee.

edit:

Dit is een veel nettere oplossing, gebruik dat maar.

[ Voor 14% gewijzigd door DiSiLLUSiON op 07-07-2008 21:44 ]

[Verwijderd]

@DiSiLLUSiON ,
bedankt,
zit al de hele tijd te proberen dat script in mijne te implanteren, lukt maar niet goed...

Kent iemand nog een andere?

[DiSiLLUSiON]

Wat lukt er dan precies niet goed?

Lees de pagina wel goed door, je hebt bijvoorbeeld prototype er naast nodig.

[Verwijderd]

Ik puzzel nog een beetje, maar ik krijg een scrollbar horizontaal van weer ik veel hoelang

[crisp]

frickY schreef op maandag 07 juli 2008 @ 21:20:
De text-overflow: ellipsis is een feature van IE, geen standaard CSS.

het is een CSS3 feature die nog in draft is. Firefox is eigenlijk de enige browser die hier ueberhaupt nog op geen enkele wijze support voor biedt. Implementatie van text-overflow hangt echter op nog een heleboel andere zaken mbt overflow-handling wat niet bepaalt een compleet normatieve specificatie kent (overflow-handling binnen auto-layout tables is bijvoorbeeld niet gespecificeerd) en zeker ook nog geen interoperable implementaties kent...

[DiSiLLUSiON]

Verwijderd schreef op dinsdag 08 juli 2008 @ 00:16:
Ik puzzel nog een beetje, maar ik krijg een scrollbar horizontaal van weer ik veel hoelang

Kijk dan even met firebug naar je css, misschien cancelt jouw css een overflow waarde van die van het scriptje uit.

[Verwijderd]

Ah, mooi hij werkt nu, Maaaaaar
als ik de text-align van de div verander in center, dan zie ik opeens niks meer.
Nu moet ik die text toch in het midden zetten voor wanneer de titel een klein woord is bijvoorbeeld.
Met deze werkt 't niet, dus misschien iemand anders met een ander script of oplossing hoe ik toch de text in het midden krijg?

[DiSiLLUSiON]

Dat gaat inderdaad niet werken met dat scriptje, aangezien het afhankelijk is van een supersized margin om de breedte van de tekst te berekenen. Om dan de tekst in het midden te zetten zou betekenen dat het buiten de container valt.

Wel vraag ik me af waarom je de tekst die niet 'afgekapt' wordt gecentreerd wilt hebben?

Het is namelijk sowieso een goed idee om zoiets als dit heel erg spaarzaam te gebruiken, bijvoorbeeld alleen bij een tabel waar een bepaalde rij vaak te lange waardes heeft. In zo'n geval is het onoverzichtelijk als de tekst die niet afgekapt wordt in het midden staat, ik vermoed dat er daarom ook geen rekening mee is gehouden.

[Verwijderd]

Ja, snap ik

Maar ik ben dus bezig voor een systeem met filmpjes.
Per filmpje is er een divje van 100px breed, bovenaan komt een thumbnail van het filmpje en daaronder de titel, maar als de titel erg kort is, staat hij dus helemaal aan de linkerkant en dat staat niet zo netjes
Daarom wil ik het liever gecentreerd hebben.

Dus misschien had iemand nog een andere manier?

[Verwijderd]

Heeft er iemand misschien nog een andere manier voor wat ik wil?

[funkwurm]

Misschien denk ik te simpel, maar het element waarvan de margin door dit script wordt aangepast plaatsen in een parent element waar jezelf de margin op auto zet?

[Verwijderd]

Bedankt voor je reactie, maar het werkt zo nog steeds niet

Iemand mss andere oplossing?

[ Voor 60% gewijzigd door Verwijderd op 11-07-2008 15:10 ]