CSS: inserir uma quebra de linha mantendo display: inline

Última atualização: 11/02/2022

À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.


Deixe um comentário

O seu endereço de e-mail não será publicado.