Is it possible to make an html element expand upwards?

Asked

Viewed 52 times

4

Ex: I have a paragraph inside a div, and I want that whenever the text breaks a line, it expands up rather than down (default).

Take the example:

#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>

Note that the text is near the bottom of the div, and if I add more text there, it will come out of space. That’s why I would like to know a solution (No Hidden overflow) that allocates the text correctly there, regardless of the size, because this would be a title coming from the database, and so would be a variable length string.

Note: Keeping the margin-top as much as possible, leaving kind of a 10px only distance from the bottom.

Thank you all and good morning!

javascript html css

  • No. The margin-top is to be right there, but if you need to expand the text, let it be up, because down will disappear or lose the formatting.

  • As the text size you need to modify the margin-top to fit in the div is this?

  • Yes, that was it, but Gumball already answered. Thank you, Marconi.

1 answer

3


It has to have a combination of position:relative with position:absolute.

I left a bottom margin of 5px. Hence it is to your taste.

#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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.