Is it possible to have an html element expand up?

Question

Is it possible to have an html element expand up?

Navigation

#1 by (3 votes)

4

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

See 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 pop out of space. This is why I would like to know a solution (not overflow hidden) that would allocate the text correctly there, regardless of size, as this would be a title coming from the database, and thus would be a variable length string.

Note: Keeping the margin-top as much as possible, leaving only a 10px type away from the bottom.

Thank you all and good morning!

javascript html css

asked by anonymous 04.11.2016 / 11:53

1 answer

Create unique constraint with two fields in Laravel request Is it possible to "simulate" C ++ Templates in C?

score 3 · Accepted Answer

You must have a combination of position:relative and position:absolute .

I left a lower margin of 5px. That's how you like it.

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