7

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:

inserir a descrição da imagem aqui

Agora, um exemplo de como o texto fica quando é um pouco maior, ou seja, que ultrapassa o limite de meu elemento:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

Seria esse o problema, possibilidades com javascript não são descartadas também caso alguém tenha uma solução bacana.

7
  • 1
    Imagino que não... imagina, se isso fosse possível você poderia acabar entrando em loop de CSS. Commented 20/02/2014 às 2:07
  • Paulo, sua pergunta está confusa. Organize as informações, coloque exemplos práticos e deixe o seu objetivo mais claro. Commented 20/02/2014 às 2:13
  • Eu achei sua pergunta direta, você quer usar uma condicional dentro do CSS. Lendo isso aqui você vai encontrar sua resposta -> dev.w3.org/csswg/css-conditional
    – user314
    Commented 20/02/2014 às 2:16
  • Reformulei minha pergunta com algumas imagens demonstrativas Caio. Talvez agora melhore o entendimento. Commented 20/02/2014 às 2:24
  • Acho melhor você usar outra técnica para centralizar o texto verticalmente.
    – bfavaretto
    Commented 20/02/2014 às 2:27

2 Respostas 2

4

No seu CSS você vai precisar declarar altura, display como table-cell e vertical-align middle.

.seletor {
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}

Veja o exemplo: http://jsfiddle.net/QPdLx/1/

3

Sugestão:

  • Diminua o line-heightdo texto, deixando na medida da tua última imagem, onde o texto com quebra de linha aparece bonito.

  • Envolva esse texto num div ou outro elemento, e aplique vertical-align: middle ao mesmo. (Talvez precise um display: inline-block.)

  • No elemento que envolve tudo (a data, o texto, o padding), aí sim, atribua um line-height da mesma altura do height para que o alinhamento vertical seja aplicado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .