CSS3 - Texto
CSS3 continha vários recursos extras, que serão adicionados posteriormente.
- text-overflow
- word-wrap
- word-break
Existem as seguintes propriedades mais comumente usadas em CSS3 -
| Sr. Não. | Valor e descrição |
|---|---|
| 1 | text-align-last Usado para alinhar a última linha do texto |
| 2 | text-emphasis Usado para enfatizar texto e cor |
| 3 | text-overflow usado para determinar como o conteúdo transbordado que não é exibido é sinalizado para os usuários |
| 4 | word-break Usado para quebrar a linha com base na palavra |
| 5 | word-wrap Usado para quebrar a linha e passar para a próxima linha |
Estouro de texto
A propriedade text-overflow determina como o conteúdo transbordado que não é exibido é sinalizado para os usuários. o exemplo de amostra de estouro de texto é mostrado a seguir -
<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>Isso produzirá o seguinte resultado -
Quebra de palavras CSS3
Usado para quebrar a linha, o código a seguir mostra o código de exemplo de quebra de palavras.
<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>Isso produzirá o seguinte resultado -
Quebra automática de palavras CSS
A quebra de linha é usada para quebrar a linha e passar para a próxima linha. O código a seguir terá uma sintaxe de amostra -
p {
word-wrap: break-word;
}