4

Ex: Eu tenho um parágrafo dentro de uma div, e eu quero que sempre que o texto quebre uma linha, ele expanda para cima, ao invés de para baixo (padrão).

Vejam o exemplo:

#content {
      width: 200px;
      height: 200px;
      background: yellow;
}

#texto {
    font-size: 16px;
    width: 180px;
    float: left;
    margin-left: 10px;
    margin-top: 95px;
}
<div id="content" >
      <p id="texto" >
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
      </p>
  </div>

Notem que o texto está próximo ao inferior da div, e se eu adicionar mais texto ali, ele irá sair do espaço. Por isso que eu gostaria de saber uma solução (Não overflow hidden) que alocasse o texto corretamente ali, independente do tamanho, pois isso seria um título vindo do banco de dados, e assim seria uma string de length variável.

Obs: Mantendo o margin-top o máximo possível, deixando tipo uns 10px somente de distância do inferior.

Obrigado a todos e bom dia!

3
  • Não. O margin-top é para estar ali mesmo, mas se caso precise expandir o texto, que seja para cima, pois para baixo irá sumir ou perder a formatação. Commented 4/11/2016 às 10:59
  • Conforme o tamanho do texto você precisa modificar o margin-top pra caber na div é isso?
    – Marconi
    Commented 4/11/2016 às 11:05
  • Sim, era isso, mas o Gumball já respondeu. Obrigado, Marconi. Commented 4/11/2016 às 11:12

1 Resposta 1

3

Tem que ter uma combinação de position:relative com position:absolute.

Deixei uma margem inferior de 5px. Daí é a gosto seu.

#content {
  width: 200px;
  height: 200px;
  background: yellow;
  position: relative;
}

#texto {
  font-size: 16px;
  width: 180px;
  display: block;
  margin: auto;
  bottom: 5px;
  left: 0;
  right: 0;
  position: absolute;
}
<div id="content" >
  <p id="texto" >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Lorem ipsum dolor sit amet. 
  </p>
</div>

0

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 .