• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Advies Gebruik van text-overflow:ellipsis

Status
Niet open voor verdere reacties.

Kumquat

Bekend gezicht
Lid geworden
29 jan 2012
Berichten
145
Waarderingsscore
0
Hi,

Ben al dagen aan het klooien maar krijg het niet voor elkaar. Ik wil graag 5 regels tekst laten zien waarvan de laatste regel eindigt op 3 puntjes.

De code die ik nu heb:
CSS:
.store-description {width:265px;color:#000000;position:relative;top:5px;left:5px;height:70px;line-height:14px;font-size:12px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}

Ik zie wel puntjes aan het einde van de zin :) maar er wordt maar 1 regel tekst weergegeven. Wie kan me hiermee verder op weg helpen?
 
Probeer eens het volgende:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.container {
    width:265px;
    color:#000000;
    position:relative;
    top:5px;
    left:5px;
    height:70px;
    line-height:14px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    }
</style>
<title>break ellipsis</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="container">
  WebKit Browsers will clamp the number of lines
  in this paragraph to 5. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim
  ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

Met -webkit-line-clamp kun je het maximale aantal regels instellen, dat mag worden weergegeven. Alle overige tekst wordt afgekort met drie ... puntjes.
 
Het stukje CSS lukt me wel om erbij te zetten, maar ik kan het html bestand niet vinden. Waar zou ik dat moeten kunnen vinden?
 
Ik weet niet of je een web editor gebruikt. In dat geval kun je bovenstaande code gewoon kopiëren naar een nieuw html bestand, en daarna opslaan.
 
Het is gelukt! Bedankt voor de hulp :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan