Efekty tekstu CSS

CSS Przepływ Tekstu, Całkowite Przekształcanie Wiersza, Reguły Przekształcania Wiersza oraz Schemat Pisma

W tym rozdziale nauczysz się takich atrybutów:

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

CSS Przepływ Tekstu

CSS text-overflow Atrybut określa, jak prezentować użytkownikowi zawartość przeciągniętą.

Można go przyciąć:

To jest długi tekst, który nie mieści się w ramce. To jest długi tekst, który nie mieści się w ramce

Można go również wyświetlić jako ellipses (…):

To jest długi tekst, który nie mieści się w ramce. To jest długi tekst, który nie mieści się w ramce

Kod CSS wygląda następująco:

Przykład

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

Spróbuj sam

Poniższy przykład pokazuje, jak wyświetlać zawartość przeciągniętą, gdy kursor myszy jest nad elementem:

Przykład

div.test:hover {
  overflow: visible;
{}

Spróbuj sam

CSS Zawijanie słów (Word Wrapping)

CSS word-wrap Atrybut pozwala na przerwanie długich tekstów i przenoszenie ich na następny wiersz.

Jeśli słowo jest zbyt długie, aby zmieścić się w obszarze, rozszerzy się na zewnątrz:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Dzięki atrybutowi word-wrap można wymusić wstawianie wierszy w tekście - nawet jeśli oznacza to rozerwanie słów po środku:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Kod CSS wygląda następująco:

Przykład

Pozwala na przerwanie długich słów i przenoszenie ich na następny wiersz:

p {
  word-wrap: break-word;
{}

Spróbuj sam

Reguły wstawiania wierszy CSS

CSS word-break Atrybut określa reguły wstawiania wierszy.

Ten akapit zawiera pewien tekst. Ta linia będzie przerwana na myślnikach:

This paragraph contains some text. This line will-break-at-hyphens.

Ten akapit zawiera pewien tekst. Wiersze będą przerwane w dowolnym znaku:

This paragraph contains some text. The lines will break at any character.

Kod CSS wygląda następująco:

Przykład

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

Spróbuj sam

Tryb pisania CSS

CSS writing-mode Atrybut określa, czy wiersz tekstu jest umieszczony poziomo czy pionowo.

Some text with a span element with a vertical-rl writing-mode.

Poniższe przykłady pokazują różne tryby pisania:

Przykład

p.test1 {
  writing-mode: horizontal-tb; 
{}
span.test2 {
  writing-mode: vertical-rl; 
{}
p.test2 {
  writing-mode: vertical-rl; 
{}

Spróbuj sam

Atrybuty efektów tekstowych CSS

Poniżej znajduje się tabela z atrybutami efektów tekstowych CSS:

Atrybut Opis
text-align-last Określa, jak wyrównać ostatni wiersz tekstu.
text-justify Określa, jak tekst powinien być wyrównany i rozstawiony.
text-overflow Określa, jak wyświetlać zawartość, która nie jest wyświetlona.
word-break Określa reguły łamania wierszy dla nieCJK.
word-wrap Pozwala na łamanie długich słów i przenoszenie ich na nową linię.
writing-mode Określa, czy tekst jest umieszczony poziomo czy pionowo.