PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
T

Punten na de te lange tekst.

Door Tom K op 10-05-2009 11:31
1.394 views
Hallo allemaal,

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:

Een erg lange zin wat te lang is


af te ronden naar:

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
Hipska BE
10-05-2009 11:37
overflow hidden eens opzoeken
M
Mar cel
10-05-2009 12:58
Waar niet met PHP icm met substr()?

Voorbeeld:
<?php
echo strlen($text) > 15 ? substr($text, 0, 15) . '...' : $text;

?>

Output:
Hallo, ik ben e...
T
Tom K
10-05-2009 13:10
Wat ik zocht is 'ellipsis', en dit is gewoon via css te doen:

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;
}


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:

<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 Californiërs 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:
T
Tom K
11-05-2009 17:44
bump
?
Onbekende gebruiker
11-05-2009 18:01
geef de css dan eens...

EDIT was er al
T
Tom K
12-05-2009 15:59
martin schreef op 11.05.2009 18:01
geef de css dan eens...

EDIT was er al


die staat er inderdaad al:)

iemand nog een idee?

Reageren

Inloggen om te reageren