Naibaf Naibaf - 5 months ago 20
CSS Question

Show bottom of an overflow string in a div with fixed height/width?

Background

I have a non-scrollable div with fixed width and height.
Here's a JSFiddle: https://jsfiddle.net/Naibaf/47fm4pvf/2/

Goal

I want to show as much of a bottom string were it not for the preceding string.

Reasoning and problem

Should you ask yourself: Why? I am trying to display a news-alert-like-bar, but I am concatenating the content of my div with

setInterval()
which will make it overflow quickly.

In my judgement, jQuery's
.scrollTop()
like here: http://jsfiddle.net/2WpQf/1/ is ill-suited, because I want my div not to be scrollable. Same goes for CSS
overflow
.

Does anyone know how to do this?

HTML

<p>How to make the bottom of a string visible within the boundaries of a div and NOT show or hide the top part?</p>
<p>The opposite of what I want:
</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>


CSS

div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}

Answer

What you can do is use an extra container and position:absolute from the bottom, that way when you add more text the block seems to increase from bottom to top:

div.hidden {
  position:relative;
    background-color: #00FF00;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
/*Position extrawrap*/
div.hidden span {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}
<div class="hidden">
  <! -- Extra Wrapper Here -->
  <span>
    You can use the overflow property when you want to have better control of the layout. The default value is visible.
  </span>
</div>


Demo Fiddle

Comments