CSS: Inserir uma quebra de linha mantendo display: inline

C

Às vezes você deseja criar uma quebra de linha após um elemento inline, sem que seja necessário mudar o valor da propriedade display para outro valor. Felizmente, basta utilizar um truque com pseudo-elementos:

.inline-element::after {
  content: '\A';
  white-space: pre;
}

Isso é especialmente útil em formulários, como exemplificado no exemplo a seguir.

See the Pen Inline line break by Andy Bell (@andybelldesign) on CodePen.

Fonte: Picalilli.

Sobre o autor

Frederico B. Teixeira

Belo-horizontino morando em Brasília, católico, marido de sorte, pai de duas meninas e dois meninos, engenheiro eletricista e desenvolvedor web freelancer com múltiplos interesses.

0 Comentários