Depășirea textului și word-wrap în CSS

Efecte de text CSS

Depășirea textului, întreruperea cuvintelor, regulile de întrerupere a liniilor și modurile de scriere au toate proprietăți CSS dedicate.

Acest capitol prezintă patru dintre ele:

text-overflow — ce se întâmplă cu conținutul care depășește
word-wrap — permite unui cuvânt lung să se întrerupă și să continue pe linia următoare
word-break — regulile de întrerupere a liniilor
writing-mode — așezarea orizontală sau verticală a liniilor de text

Proprietatea CSS text-overflow

Când conținutul depășește și rămâne ascuns, proprietatea CSS text-overflow decide cum este semnalat utilizatorului: textul este fie tăiat, fie se termină cu puncte de suspensie (...).

Nu are efect decât dacă sunt prezente alte două declarații:

white-space: nowrap;
overflow: hidden;

Exemplu

Două moduri de a trata textul care depășește: tăiat în primul paragraf, terminat cu puncte de suspensie (...) în al doilea.

Afișați două paragrafe cu CSS text-overflow. Primul paragraf folosește text-overflow: clip, iar al doilea folosește text-overflow: ellipsis. Ambele au o lățime de 200px, o bordură neagră continuă de 1px, white-space: nowrap și overflow: hidden. Folosiți un text lung care depășește containerul.

> Output: complete HTML page

Prompt

Afișați două paragrafe cu CSS text-overflow. Primul paragraf folosește text-overflow: clip, iar al doilea folosește text-overflow: ellipsis. Ambele au o lățime de 200px, o bordură neagră continuă de 1px, white-space: nowrap și overflow: hidden. Folosiți un text lung care depășește containerul.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow</title>
<style>
p.test1 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

</body>
</html>

Afișare la trecerea cursorului

Aici conținutul care depășește revine la vedere în clipa în care treci cursorul peste element.

Afișați un paragraf cu text-overflow: ellipsis, white-space: nowrap, overflow: hidden și o lățime de 200px cu o bordură neagră. La trecerea cursorului (hover), setați overflow la visible pentru a afișa textul complet.

> Output: complete HTML page

Prompt

Afișați un paragraf cu text-overflow: ellipsis, white-space: nowrap, overflow: hidden și o lățime de 200px cu o bordură neagră. La trecerea cursorului (hover), setați overflow la visible pentru a afișa textul complet.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow hover</title>
<style>
p.test {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test:hover {
  overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the paragraph below to see the full text.</p>

<p class="test">This is some long text that will not fit in the box</p>

</body>
</html>

Proprietatea CSS word-wrap

Un cuvânt prea lung pentru zona sa pur și simplu iese în afara ei. Proprietatea CSS word-wrap oprește acest lucru, permițând cuvintelor lungi să se întrerupă și să continue pe linia următoare.

Cu alte cuvinte, forțează textul să treacă pe rândul următor, chiar și atunci când despărțirea cade la mijlocul unui cuvânt.

Exemplu

Aici un cuvânt lung se întrerupe și continuă pe linia următoare.

Afișați un paragraf care conține un cuvânt foarte lung, neîntrerupt (precum „thisisaveryveryveryveryveryverylongword”) cu word-wrap: break-word aplicat, astfel încât cuvântul lung să se întrerupă și să treacă pe linia următoare. Folosiți un container cu lățimea de 11em.

> Output: complete HTML page

Prompt

Afișați un paragraf care conține un cuvânt foarte lung, neîntrerupt (precum „thisisaveryveryveryveryveryverylongword”) cu word-wrap: break-word aplicat, astfel încât cuvântul lung să se întrerupă și să treacă pe linia următoare. Folosiți un container cu lățimea de 11em.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-wrap</title>
<style>
p {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>
</head>
<body>

<h2>word-wrap: break-word</h2>

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

</body>
</html>

Proprietatea CSS word-break

Ce se întâmplă cu cuvintele care ajung la sfârșitul unei linii depinde de proprietatea CSS word-break.

Aceasta acceptă una dintre trei valori:

normal — se aplică regulile implicite de întrerupere a liniilor ale limbii
break-all — pentru a preveni depășirea, un cuvânt se poate întrerupe la orice caracter
keep-all — cuvintele sunt ferite de întrerupere

Exemplu

Compară word-break: normal din primul paragraf cu word-break: break-all din al doilea.

Afișați două paragrafe care demonstrează valorile word-break. Primul folosește word-break: normal cu text cu cratimă, al doilea folosește word-break: break-all. Ambele trebuie să fie într-un container îngust cu bordură pentru a arăta cum se întrerupe textul diferit.

> Output: complete HTML page

Prompt

Afișați două paragrafe care demonstrează valorile word-break. Primul folosește word-break: normal cu text cu cratimă, al doilea folosește word-break: break-all. Ambele trebuie să fie într-un container îngust cu bordură pentru a arăta cum se întrerupe textul diferit.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-break</title>
<style>
p.test1 {
  width: 140px;
  border: 1px solid #000000;
  word-break: normal;
}

p.test2 {
  width: 140px;
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>

<h2>word-break: normal</h2>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<h2>word-break: break-all</h2>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

</body>
</html>

Proprietatea CSS writing-mode

Liniile de text pot curge orizontal sau vertical, iar proprietatea CSS writing-mode alege între cele două.

Aceasta acceptă una dintre trei valori:

horizontal-tb — valoarea implicită: textul curge orizontal de la stânga la dreapta, iar liniile se așază vertical de sus în jos
vertical-rl — textul curge vertical de sus în jos, iar liniile se așază orizontal de la dreapta la stânga
vertical-lr — textul curge vertical de sus în jos, iar liniile se așază orizontal de la stânga la dreapta

Exemplu

Mai multe moduri de scriere în acțiune, acoperind atât așezarea orizontală, cât și cea verticală a textului.

Afișați exemple de CSS writing-mode. Includeți un paragraf cu horizontal-tb (implicit), un paragraf care conține un span cu writing-mode: vertical-rl și un al treilea paragraf setat în întregime la writing-mode: vertical-rl. Adăugați borduri pentru a vizualiza fiecare.

> Output: complete HTML page

Prompt

Afișați exemple de CSS writing-mode. Includeți un paragraf cu horizontal-tb (implicit), un paragraf care conține un span cu writing-mode: vertical-rl și un al treilea paragraf setat în întregime la writing-mode: vertical-rl. Adăugați borduri pentru a vizualiza fiecare.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS writing-mode</title>
<style>
p.test1 {
  writing-mode: horizontal-tb;
}

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

p.test3 {
  writing-mode: vertical-rl;
}
</style>
</head>
<body>

<h2>writing-mode: horizontal-tb</h2>
<p class="test1">This is a paragraph with writing-mode: horizontal-tb (default).</p>

<h2>Vertical text inside a span</h2>
<p>Here is a text with a <span class="test2">span element with a vertical-rl writing-mode</span>.</p>

<h2>writing-mode: vertical-rl</h2>
<p class="test3">This is a paragraph with writing-mode: vertical-rl.</p>

</body>
</html>

Proprietăți pentru efecte de text CSS

Proprietățile CSS pentru efecte de text, pe scurt:

text-justify — alinierea și spațierea textului justificat
text-overflow — cum este semnalat utilizatorului conținutul care depășește și rămâne ascuns
word-break — regulile de întrerupere a liniilor aplicate cuvintelor
word-wrap — permite cuvintelor lungi să se întrerupă și să continue pe linia următoare
writing-mode — dacă liniile de text curg orizontal sau vertical