Punten na de te lange tekst.
Ik ben al enige tijd aan het zoeken naar een manier om de tekst 'af te ronden' als de tekst meer dan 100% breedte heeft dan de parent div. Ik wil dit graag in een combinate met javascript en css doen. Ik heb helaas nog niks gevonden.
Het volgende is dus de bedoeling:
Code (php)
1
Een erg lange zin wat te lang is
af te ronden naar:
Code (php)
1
Een erg lange z...
als de tekst te lang word(groter dan 100% van de parent div).
Heeft iemand misschien een idee hoe ik dit moet doen? Een keyword voor het zoeken op google is ook goed, want ik weet niet hoe dit heet...
Alvast bedankt,
Tom
Voorbeeld:
Output:
Hallo, ik ben e...
Gewijzigd op 01/01/1970 01:00:00 door Mar cel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ul.leftmenu {
width: 100%;
height: auto;
list-style-type: none;
margin: 0;
padding:10px;
}
ul.leftmenu li {
word-wrap: normal;
margin: 0;
padding:0;
}
ul.ellipsis li a {
margin: 0;
padding:0;
color: #9e9c75;
font-weight: bold;
text-decoration: none;
}
ul.leftmenu a:hover {
margin: 0;
padding:0;
color: #9e9c75;
font-weight: bold;
text-decoration: underline;
}
ul.ellipsis li span {
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
overflow: hidden;
width: 180px;
display: block;
margin: 0;
padding-top: 2px;
}
width: 100%;
height: auto;
list-style-type: none;
margin: 0;
padding:10px;
}
ul.leftmenu li {
word-wrap: normal;
margin: 0;
padding:0;
}
ul.ellipsis li a {
margin: 0;
padding:0;
color: #9e9c75;
font-weight: bold;
text-decoration: none;
}
ul.leftmenu a:hover {
margin: 0;
padding:0;
color: #9e9c75;
font-weight: bold;
text-decoration: underline;
}
ul.ellipsis li span {
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
overflow: hidden;
width: 180px;
display: block;
margin: 0;
padding-top: 2px;
}
helaas heb ik nu een ander raar probleem, in ie7 staat de tekst veel te ver uit elkaar in ie8, ff staat het gewoon wel hoe het hoort. Ik gebruik precies de zelfde css als hierboven, en de volgende html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ul class="leftmenu ellipsis">
<li>
<a href="http://www.nu.nl/algemeen/1961792/walrusbaby-overleden-in-harderwijk.html"><span>Walrusbaby overleden in Harderwijk</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961756/sympathie-voor-beatrix-groeit-na-aanslag.html"><span>Sympathie voor Beatrix groeit na aanslag</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961762/ruim-250-burgerdoden-door-acties-leger-sri-lanka.html"><span>'Ruim 250 burgerdoden door acties leger Sri Lanka'</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961759/gewonden-door-turbulentie-op-vlucht-lufthansa.html"><span>Gewonden door turbulentie op vlucht Lufthansa</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961754/sp-sluit-regeren-met-pvv-uit.html"><span>SP sluit regeren met PVV uit</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961736/honderd-meter-hoge-vlammen-na-gasexplosie-moskou.html"><span>Honderd meter hoge vlammen na gasexplosie Moskou</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961738/populariteit-brown-naar-historisch-dieptepunt.html"><span>Populariteit Brown naar historisch dieptepunt</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961740/duizenden-californiers-mogen-weer-naar-huis.html"><span>Duizenden Californirs mogen weer naar huis</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961744/mexicaanse-griep-eist-derde-dode-in-vs.html"><span>Mexicaanse griep eist derde dode in VS</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961725/vuurwapenbezit-aruba-loopt-uit-de-hand.html"><span>'Vuurwapenbezit Aruba loopt uit de hand'</span></a>
</li>
</ul>
<li>
<a href="http://www.nu.nl/algemeen/1961792/walrusbaby-overleden-in-harderwijk.html"><span>Walrusbaby overleden in Harderwijk</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961756/sympathie-voor-beatrix-groeit-na-aanslag.html"><span>Sympathie voor Beatrix groeit na aanslag</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961762/ruim-250-burgerdoden-door-acties-leger-sri-lanka.html"><span>'Ruim 250 burgerdoden door acties leger Sri Lanka'</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961759/gewonden-door-turbulentie-op-vlucht-lufthansa.html"><span>Gewonden door turbulentie op vlucht Lufthansa</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961754/sp-sluit-regeren-met-pvv-uit.html"><span>SP sluit regeren met PVV uit</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961736/honderd-meter-hoge-vlammen-na-gasexplosie-moskou.html"><span>Honderd meter hoge vlammen na gasexplosie Moskou</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961738/populariteit-brown-naar-historisch-dieptepunt.html"><span>Populariteit Brown naar historisch dieptepunt</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961740/duizenden-californiers-mogen-weer-naar-huis.html"><span>Duizenden Californirs mogen weer naar huis</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961744/mexicaanse-griep-eist-derde-dode-in-vs.html"><span>Mexicaanse griep eist derde dode in VS</span></a>
</li>
<li>
<a href="http://www.nu.nl/algemeen/1961725/vuurwapenbezit-aruba-loopt-uit-de-hand.html"><span>'Vuurwapenbezit Aruba loopt uit de hand'</span></a>
</li>
</ul>
Iemand een idee?
Zo ziet het er uit in ie7:
en zo ziet het eruit in ff:
maar ik zou niet midden in een woord afbreken
martin schreef op 10.05.2009 13:43:
http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css
maar ik zou niet midden in een woord afbreken
maar ik zou niet midden in een woord afbreken
Dat is het probleem niet, het gaat mij om de ruimte tussen de links in internet explorer 7
martin schreef op 11.05.2009 18:01:geef de css dan eens...
EDIT was er al
EDIT was er al
die staat er inderdaad al:)
iemand nog een idee?