Na maioria das vezes que trabalho com textos dentro de elementos HTML, utilizo um recurso em CSS chamado line-height
. Suponhamos que a altura de um elemento específico seja de 50px
, logo, coloco o line-height
com 50px
também para que o texto fique centralizado. Pois bem, quando esse texto quebra linha, ou seja, acaba sendo maior que o tamanho do meu elemento, não fica uma coisa muito legal. Existe uma forma em CSS que verifique se meu texto quebrou linha para que eu possa adicionar uma propriedade line-height
diferente?
Exemplo de um texto em que fica centralizado corretamente, contendo pouco texto:
Agora, um exemplo de como o texto fica quando é um pouco maior, ou seja, que ultrapassa o limite de meu elemento:
Percebam que na imagem acima, o texto caiu e manteve o tamanho do line-height. Isso é ruim pois acaba ultrapassando o limite de altura de meu elemento.
Agora, como gostaria que ficasse quando o texto cai pra linha debaixo:
Seria esse o problema, possibilidades com javascript não são descartadas também caso alguém tenha uma solução bacana.