CSS Text:
Vamos ver aqui a propriedade text-overflow A propriedade que especifica como o conteúdo
transbordado que não é exibido, deve ser sinalizado para o usuário.
abaixo num campo com 350px veja como é tratado o que é transbordado:
Clip corta, ellipsis deixa uma reticências(...).
Aqui estou tratando o primeiro texto em transbordamento com clip.
Aqui estou tratando o segundo texto em transbordamento com ellipsis.
A propriedade word-wrap quebra a palavra/linha, a fim de prevenir o vazamento.
Aqui estou tratando o segundo texto em quebra:
com ellipsis abcdefghijlmnopqrstuvxz.
Caso contrario haveria transbordamento.
Aqui estou tratando o segundo texto em quebra:
com ellipsis abcdefghijlmnopqrstuvxz.
A instrução é usada para especificar se o navegador deve inserir ou não
quebras de linha onde, normalmente, o texto vazaria de seu container. A instrução
aceita os valores: normal, break-all, keep-all e break-word.
Aqui aplicamos word-break: normal. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: break-all. Vamos ver o que acontece.
Aqui vai texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: keep-all. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: break-word. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Vamos ver num container menor: 350px
Aqui aplicamos word-break: normal. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: break-all. Vamos ver o que acontece.
Aqui vai texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: keep-all. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Aqui aplicamos word-break: break-word. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece. Vamos ver o que acontece. Aqui vai
texto adicional pra gente ver o que acontece.
Vamos brincar agora com writing-mode.
Essa propriedade define se as linhas do texto são dispostas horizontalmente ou
verticalmente e a direção que os blocos seguem.
horizontal-tb |
HORIZONTAL-TB |
HORIZONTALTB |
HORIZONTAL |
vertical-lr |
VERTICAL LR |
VERTICAL LR |
VERTICAL LR |
vertical-rl |
VERTICAL-RL |
VERTICAL-RL |
VERTICAL-RL |
sideways-lr |
SIDEWAYS-LR |
SIDEWAYS-LR |
SIDEWAYS-LR |
sideways-rl |
SIDEWAYS-RL |
SIDEWAYS-RL |
SIDEWAYS-RL |