Sinval Gomes...

Development flexible layout with flexbox.

+ LINKS

CSS Avançado border-radius.
CSS Avançado Multiple Background.
CSS Avançado Background.
CSS Avançado CSS Colors.
CSS Avançado Flex Items.
CSS Avançado Media Query.
CSS Avançado RWD Vídeos.
CSS Avançado Flex Direction.
CSS Avançado Justify Content.
CSS Avançado Justify + Align Items.

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