[CSS] Tekst afbreken met '...'

[DoubleJ]

Ben bezig met een RSS feedje die me hier en daar te lange titels geeft, die wil ik afkappen met 3 puntjes. Ik zoek me helemaal rot maar '...' is niet echt google vriendelijk.

Tweakers gebruikt het ook maar hier (webdev toolbar: 'view style information') in kan ik t niet vinden...

Cascading Stylesheet:

a (line 16) {
 color: #000000;
 text-decoration: underline;
}
 h1 a, h2 a, h3 a, h4 a, .pageDistribution a, table a, ul a, a.nounderline (line 38) {
 color: #000000;
 text-decoration: none;
}
 a:hover (line 21) {
 color: #ed053e;
 text-decoration: underline;
}
 .ellipsis a, .shorten a (line 2154) {
 display: block;
 white-space: nowrap;
 overflow-x: hidden;
 overflow-y: hidden;
}
 h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, .pageDistribution a:hover, table a:hover, ul a:hover, a.nounderline:hover (line 46) {
 text-decoration: underline;
}
 #utracker .trackeritem ul li a.pro:hover, a.pro:hover, h1 a.pro (line 1242) {
 color: #ad014e;
}

a:hover, ul li a:hover span.date p.breadCrumb a:hover, .pageDistribution a:hover, a.pwmanager1:hover, .tableVa td.title a:hover, table.flat a:hover, table.itemList a:hover, span.author a:hover, p.author a:hover, #utracker .trackeritem ul li a:hover (line 35) {
 color: #ed053e;
}
 a:hover, ul li a:hover span.date p.breadCrumb a:hover, .pageDistribution a:hover, a.pwmanager1:hover, .tableVa td.title a:hover, table.flat a:hover, table.itemList a:hover, span.author a:hover, p.author a:hover, #utracker .trackeritem ul li a:hover (line 35) {
 color: #ed053e;
}

Weet iemand welke CSS property ik moet gebruiken hiervoor?

[disjfa]

Er is hier geen css propertie voor. css is voor opmaak. Niet inhoud.

[DoubleJ]

ik meen te hebben gezien dat dit met CSS kan. Overigens zou ik dit ook als opmaak beschouwen, in plaats van dat ik het hard afkap met een overlflow wil ik het 'mooi' doen...

Niet zo goed opgelet want ik zie inderdaad dat tweakers het gewoon in de content doet.

[ Voor 20% gewijzigd door DoubleJ op 12-10-2007 11:25 ]

[BtM909]

Zoek eens naar

Cascading Stylesheet:

bla{
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Is overigens niet crossbrowser. Een van de leuke dingen die MS wel heeft geimplementeerd

[ Voor 37% gewijzigd door BtM909 op 12-10-2007 11:26 ]

[DoubleJ]

Thanks! Jammer dat firefox het niet ondersteund, dan maar een achtergrond plaatje ofzo

[Icelus]

Misschien nog interessant:
Emulate text-overflow:ellipsis in Firefox with CSS

[CodeCaster]

De titels aan de linkerkant op de t.net frontpage verspringen irritant (van volledig naar afgekapt met puntjes (...)) als de pagina geladen is. Als dit verspring-effect je niet uitmaakt kun je misschien eens naar de javascript in de source van de pagina kijken.

[Verwijderd]

PHP:

$maxChar = 50;

// Is titel langer dan " " characters?
if(strlen($string) > $maxChar) {
   $string = substr($string, 0, $maxChar);
}

Niet zo heel netjes en precies, maar het doet wat hij moet doen.

[KatirZan]

Verwijderd schreef op vrijdag 12 oktober 2007 @ 11:36:

PHP:

$maxChar = 50;

// Is titel langer dan " " characters?
if(strlen($string) > $maxChar) {
   $string = substr($string, 0, $maxChar);
}

Niet zo heel netjes en precies, maar het doet wat hij moet doen.

Jammer genoeg kapt deze juist de tekst af zonder het "..." gedeelte er aan toe te voegen

[disjfa]

Ik gebruik zelf smarty en daar zit gewoon een truncate functie in. Als ik gewoon slecht de code mag knippen en plakken uit de smarty file:

PHP:

function smarty_modifier_truncate($string, $length = 80, $etc = '...',
                                  $break_words = false)
{
    if ($length == 0)
        return '';

    if (strlen($string) > $length) {
        $length -= strlen($etc);
        if (!$break_words)
            $string = preg_replace('/\s+?(\S+)?$/', '', substr($string, 0, $length+1));

        return substr($string, 0, $length).$etc;
    } else
        return $string;
}

http://smarty.php.net/man...age.modifier.truncate.php

[DoubleJ]

Javascript gaat hem niet worden, is voor een klant namelijk. Ik ga eens aan de slag met de PHP oplossingen. Bedankt allemaal!

Ah over je heen gelezen:

Icelus schreef op vrijdag 12 oktober 2007 @ 11:30:
Misschien nog interessant:
Emulate text-overflow:ellipsis in Firefox with CSS

Dat gaat hem worden, thanks

[ Voor 57% gewijzigd door DoubleJ op 12-10-2007 11:44 ]

[PeterSelie]

En waarom zou je geen javascript mogen / kunnen gebruiken voor een klant?

[ Voor 7% gewijzigd door PeterSelie op 12-10-2007 11:44 ]

[DoubleJ]

Mag wel, maar als er alternatieven zijn dan liever niet. Lijkt me vanzelfsprekend. Da's mijn werkwijze.. Voor een persoonlijke site ben ik er veel minder strict in.

[ Voor 36% gewijzigd door DoubleJ op 12-10-2007 11:46 ]

[TeeDee]

In de gelinkte pagina staat een comment: http://www.hedgerwow.com/360/dhtml/text_overflow/demo.php

Misschien dat die wat beter werkt

edit:
Is wel met JS, maar imo een nettere oplossing dan pure css

[ Voor 20% gewijzigd door TeeDee op 12-10-2007 11:46 ]

[DoubleJ]

Ook javascript en werkt niet echt lekker. Als je een beetje tekst selecteert en je muis rond sleept begint ie te flippen...