CSS3 - Text Overflow

Rukovanje sa Text Overflow u CSS3

CSS3 je predstavio nekoliko novih svojstava za modifikovanje sadržaja teksta, međutim neka od tih svojstava postoje već dugo. Ova svojstva daju vam preciznu kontrolu nad prikazivanjem teksta u web pretraživaču.


Sakrivanje Text Overflow

Tekst se može prelijevati, na primjer: ako je vrijednost svojstva praznog prostora postavljena tako da sada obuhvata element koji sadrži ili je jedna riječ preduga da stane kao duga adresa e-pošte. U takvoj situaciji možete koristiti CSS3 svojstvo text-overflow da odredite kako će se prikazati tekstualni sadržaj. Preliveni tekst ili isječak možete prikazati tako što ćete isjeći i prikazati elipsu ili prilagođeni string u mjestu isječenog teksta kako biste naznačili korisnika. Vrijednosti koje prihvata svojstvo word-break su: clip, ellipsis i string. 

p {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    background: #cdcdcd;
}
p.clipped {
    text-overflow: clip; /* isječen overflowed text */
}
p.ellipses {
    text-overflow: ellipsis; /* prikaz '...' za predstavljanje isječenog teksta */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 text-overflow svojstva</title>
<style>
    p {
        width: 400px;
        padding: 10px;
        overflow: hidden;
        white-space: nowrap;
        background: #f2f2f2;
    }
    p.clipped {
        text-overflow: clip;
    }
    p.ellipses {
        text-overflow: ellipsis;
    }
</style>
</head>
<body>
    <h1>Text-overflow efekt</h1>        
    <h2>Isjecite tekst na ograničeno područje sadržaja</h2>
    <p class="clipped">CSS je jezik tabele stilova za formatiranje sadržaja dokumenta
      (napisano u HTML-u ili drugom jeziku za označavanje). Možda ćete biti zainteresovani
      od strane wiki-ja CSS Radne grupe. </p>
     <h2> Prikažite elipsu ("...") koja predstavlja isječeni tekst </h2>
     <p class = "ellipses"> CSS je jezik tabele stilova za formatiranje sadržaja dokumenta
      (napisano u HTML-u ili drugom jeziku za označavanje). Možda ćete biti zainteresirani
      od strane wiki-ja CSS Radne grupe. </p>
</body>
</html>

Razbijanje prekomjernog teksta

Takođe možete prekinuti dugu riječ i prisiliti je da se prebaci na novu liniju koja prelazi granice sadržanog elementa pomoću CSS3 svojstva word-wrap. Vrijednosti koje prihvata svojstvo word-wrap su: normal i break-word. 

p {
    width: 200px;
    background: #ffc4ff;
    word-wrap: break-word;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 word-wrap svojstva</title>
<style>
    p {
    width: 200px;
    padding: 10px;
    background: #90ee90;
    word-wrap: break-word;
  }
</style>
</head>
<body>
    <p>Ovaj odlomak sadrži vrlovjerovjekovnovjerovjekovnu riječ.
    Duga riječ automatski će se prelomiti i premjestiti u sljedeći red.</p>
</body>
</html>

Navođenje pravila za razbijanje riječi

Takođe možete sami odrediti pravila razbijanja reda za tekst (tj. kako razbiti redove unutar riječi) koristeći svojstvo word-break u CSS3. Vrijednosti koje prihvata svojstvo word-break su: normal, break-all i keep-all. 

p {
    width: 150px;
    padding: 10px;
}
p.break {
    background: #bedb8b;
    word-break: break-all;
}
p.keep {
    background: #f09bbb;
    word-break: keep-all;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 word-break svojstva</title>
<style>
    p.line1 {
    width: 150px;
    padding: 10px;
    background: #90ee90;
    word-break: break-all;
  }
  p.line2 {
    width: 150px;
    padding: 10px;
    background: #efa38f;
    word-break: keep-all;
  }
</style>
</head>
<body>
  <p class="line1">Red ovoga pasusa može se prekidati bilo kojim znakom.</p>
  <p class="line2">Redak ovog odlomka prelomiće will-break-at-hyphenates.</p>
</body>
</html>