CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Textové efekty CSS


Přetečení textu CSS , zalamování slov, pravidla zalamování řádků a režimy psaní

V této kapitole se dozvíte o následujících vlastnostech:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

Přetečení textu CSS

Vlastnost CSS text-overflowurčuje, jak má být uživateli signalizován přetečený obsah, který se nezobrazuje.

Dá se oříznout:

Toto je dlouhý text, který se nevejde do rámečku

nebo jej lze vykreslit jako elipsu (...):

Toto je dlouhý text, který se nevejde do rámečku

CSS kód je následující:

Příklad

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

Následující příklad ukazuje, jak můžete zobrazit přetečený obsah, když umístíte kurzor na prvek:

Příklad

div.test:hover {
  overflow: visible;
}


CSS zalamování slov

Vlastnost CSS word-wrapumožňuje rozdělit dlouhá slova a zalomit je na další řádek. 

Pokud je slovo příliš dlouhé a nevejde se do oblasti, rozšíří se mimo:

Tento odstavec obsahuje velmi dlouhé slovo: toto je velmi dlouhé slovo. Dlouhé slovo se zlomí a zalomí na další řádek.

Vlastnost word-wrap vám umožňuje vynutit zalamování textu – i když to znamená jeho rozdělení uprostřed slova:

Tento odstavec obsahuje velmi dlouhé slovo: toto je velmi dlouhé slovo. Dlouhé slovo se zlomí a zalomí na další řádek.

CSS kód je následující:

Příklad

Umožněte, aby bylo možné dělit dlouhá slova a zalomit je na další řádek:

p {
  word-wrap: break-word;
}

CSS Word Breaking

Vlastnost CSS word-breakurčuje pravidla zalamování řádků.

Tento odstavec obsahuje nějaký text. Tento řádek se zalomí na pomlčky.

Tento odstavec obsahuje nějaký text. Řádky se přeruší u jakéhokoli znaku.

CSS kód je následující:

Příklad

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

Režim psaní CSS

Vlastnost CSS writing-modeurčuje, zda jsou řádky textu rozloženy vodorovně nebo svisle.

Nějaký text s prvkem span s a vertikální-rl režim psaní.

Následující příklad ukazuje některé různé režimy zápisu:

Příklad

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Otestujte se pomocí cvičení

Cvičení:

Určete, že přetečený obsah prvku <p> má být signalizován třemi tečkami (...).

<style>
p {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  : ;
}
</style>

<body>
  <p>
    This paragraph contains a very long word: supercalifragilisticexpialidocious.
  </p>
</body>


Vlastnosti textového efektu CSS

V následující tabulce jsou uvedeny vlastnosti textového efektu CSS:

Property Description
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically