En este capítulo aprenderá sobre las siguientes propiedades:
text-overflow
word-wrap
word-break
writing-modeLa propiedad CSS text-overflow especifica cómo se desborda el contenido que no se mostrado debe ser señalado al usuario.
Se puede recortar:
This is some long text that will not fit in the box
o puede representarse como puntos suspensivos (...):
This is some long text that will not fit in the box
El código CSS es el siguiente:
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;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>
<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>
El siguiente ejemplo muestra cómo puede mostrar el contenido desbordado al pasar el cursor sobre el elemento:
div.test:hover {
overflow: visible;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
La propiedad CSS word-wrap permite dividir palabras largas y ajustarlas a la siguiente línea.
Si una palabra es demasiado larga para caber dentro de un área, se expande hacia afuera:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
La propiedad de ajuste de palabras le permite forzar el ajuste del texto, incluso si eso significa dividirlo en medio de una palabra:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
El código CSS es el siguiente:
Permita que las palabras largas se puedan dividir y pasar a la siguiente línea:
p {
word-wrap: break-word;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
La propiedad CSS word-break especifica reglas de salto de línea.
This paragraph contains some text. This line will-break-at-hyphens.
This paragraph contains some text. The lines will break at any character.
El código CSS es el siguiente:
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>
</html>
La propiedad CSS modo de escritura especifica si las líneas de texto están dispuestas horizontal o verticalmente.
Algún texto con un elemento span con un modo de escritura vertical-rl.
Some text with a span element with a vertical-rl writing-mode.
El siguiente ejemplo muestra algunos modos de escritura diferentes:
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>
</body>
</html>
La siguiente tabla enumera las propiedades del efecto de texto CSS:
Especifica cómo se debe alinear y espaciar el texto justificado.
Especifica cómo se debe indicar al usuario el contenido desbordado que no se muestra.
Especifica reglas de salto de línea para scripts que no son CJK
Permite dividir palabras largas y pasar a la siguiente línea
Especifica si las líneas de texto se disponen horizontal o verticalmente.