CSS3 - Texto
CSS3 contenía varias características adicionales, que se agregarán más adelante.
- text-overflow
- word-wrap
- word-break
Hay las siguientes propiedades más utilizadas en CSS3:
| No Señor. | Valor y descripción |
|---|---|
| 1 | text-align-last Se usa para alinear la última línea del texto. |
| 2 | text-emphasis Se usa para enfatizar texto y color |
| 3 | text-overflow se utiliza para determinar cómo se indica a los usuarios el contenido desbordado que no se muestra |
| 4 | word-break Se usa para romper la línea según la palabra |
| 5 | word-wrap Se usa para romper la línea y pasar a la siguiente línea |
Desbordamiento de texto
La propiedad de desbordamiento de texto determina cómo se indica a los usuarios el contenido desbordado que no se muestra. el ejemplo de muestra de desbordamiento de texto se muestra a continuación:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Producirá el siguiente resultado:
Rompimiento de palabras CSS3
Usado para romper la línea, el siguiente código muestra el código de muestra de la división de palabras.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Producirá el siguiente resultado:
Ajuste de palabras CSS
El ajuste de palabras se usa para dividir la línea y pasar a la siguiente línea. El siguiente código tendrá una sintaxis de muestra:
p {
word-wrap: break-word;
}