Efekty tekstu CSS

CSS 文本溢出、整字换行、换行规则以及书写模式

在本章中，您将学习如下属性：

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

CSS 文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

也可以将其呈现为省略号（...）：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

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 się zawartość przeciągnięta, gdy kursor myszy jest nad elementem:

Przykład

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

Spróbuj sam

CSS Word Wrapping (Wstawianie wierszy)

CSS word-wrap Atrybut umożliwia łamanie długich tekstów i przenoszenie ich na następną linię.

Jeśli słowo jest zbyt długie, aby zmieścić się w obszarze, rozciąga 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 rozdzieranie słów na ś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 łamanie długich słów i przenoszenie ich na następną linię:

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 przerywana na myślnikach:

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

Ten akapit zawiera pewien tekst. Wiersze będą przerywane 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 wiersze tekstu są umieszczane 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 tekstu CSS

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

Atrybut Opis
text-align-last Określa, jak wyrównać ostatnią linię tekstu.
text-justify Określa, jak wyrównywać i rozstawiać tekst.
text-overflow Określa, jak wyświetlać nadmiar nie wyświetlonych treści.
word-break Określa reguły wstępnego przecięcia dla nieCJK.
word-wrap Pozwala na przecięcie długich słów i przenoszenie ich na następną linię.
writing-mode Określa, czy tekst jest umieszczony poziomo czy pionowo.