Clip Overflow, Vertical-Align Bottom...how do I do this?

[BeeRich]

Hi folks.

Question for the gurus.

I have a box 200 wide, 200 tall. I insert text in there and it's
larger than the box. So I set overflow to hidden. The result is
text
that starts at the beginning, and the end of the paragraph is sliced
off at the end.

How do I shove this vertically, so that the beginning is cut off, and
the last parts of that text are shown, aligned to the bottom? The
length of this text will change, so I need a way of aligning it so
that the top part becomes hidden, not the bottom.

Any ideas?

 

[Neredbojias]

Hi folks.

Question for the gurus.

I have a box 200 wide, 200 tall. I insert text in there and it's
larger than the box. So I set overflow to hidden. The result is
text
that starts at the beginning, and the end of the paragraph is sliced
off at the end.

How do I shove this vertically, so that the beginning is cut off, and
the last parts of that text are shown, aligned to the bottom? The
length of this text will change, so I need a way of aligning it so
that the top part becomes hidden, not the bottom.

Any ideas?

There are ways to reverse text direction (rtl or ltr) but I don't know for
sure if they can be applied to a single element. Furthermore, the lines
would probably still go from top to bottom, but I'd experiment to see what
I could come up with.

--
Neredbojias

Never doubt
The path you've chosen.
If others mock,
Just thumb your nosin'.

-Burma Shave

 

[Ben C]

Hi folks.

Question for the gurus.

I have a box 200 wide, 200 tall. I insert text in there and it's
larger than the box. So I set overflow to hidden. The result is
text
that starts at the beginning, and the end of the paragraph is sliced
off at the end.

How do I shove this vertically, so that the beginning is cut off, and
the last parts of that text are shown, aligned to the bottom? The
length of this text will change, so I need a way of aligning it so
that the top part becomes hidden, not the bottom.

Use absolute positioning to put one box inside another and to align the
inner box with the bottom of the outer one. If you leave top and height
auto on the inner one, it will get its content height and overflow its
container upwards.

<style type="text/css">
#container
{
position: relative; /* so it's containing block for contents */
height: 100px; /* Or use 200px obviously */
width: 200px;
background-color: palegreen;
margin-top: 200px; /* just so we can see the top clearly */
overflow: hidden;
}
#contents
{
position: absolute;
bottom: 0; /* align it to bottom of container */
font-size: xx-large;
/* We leave top and height as auto */
}
</style>

...

<div id="container">
<div id="contents">
1 blah<br>
2 blah<br>
3 blah<br>
4 blah<br>
5 blah<br>
</div>
</div>

 

[Ben C]

There are ways to reverse text direction (rtl or ltr) but I don't know for
sure if they can be applied to a single element.

They can be.

Furthermore, the lines
would probably still go from top to bottom, but I'd experiment to see what
I could come up with.

The lines still go from top to bottom. They always go from top to bottom
in CSS. I don't know of any language in which lines might be written
bottom to top, although perhaps there are some. You can write characters
top to bottom and lines right-to-left in Chinese or Japanese (in books,
not CSS) but I've never heard of anything going bottom-to-top.

OP could always turn his monitor upside down I suppose.

 

[BeeRich]

Use absolute positioning to put one box inside another and to align the
inner box with the bottom of the outer one. If you leave top and height
auto on the inner one, it will get its content height and overflow its
container upwards.

<style type="text/css">
#container
{
position: relative; /* so it's containing block for contents */
height: 100px; /* Or use 200px obviously */
width: 200px;
background-color: palegreen;
margin-top: 200px; /* just so we can see the top clearly */
overflow: hidden;
}
#contents
{
position: absolute;
bottom: 0; /* align it to bottom of container */
font-size: xx-large;
/* We leave top and height as auto */
}
</style>

...

<div id="container">
<div id="contents">
1 blah<br>
2 blah<br>
3 blah<br>
4 blah<br>
5 blah<br>
</div>
</div>

Ah it worked. Now to apply it to my real application.

Cheers

 

[BeeRich]

They can be.


The lines still go from top to bottom. They always go from top to bottom
in CSS. I don't know of any language in which lines might be written
bottom to top, although perhaps there are some. You can write characters
top to bottom and lines right-to-left in Chinese or Japanese (in books,
not CSS) but I've never heard of anything going bottom-to-top.

OP could always turn his monitor upside down I suppose.

You missed what I'm saying. Alignment of the block of text on the
bottom, so the top overflow is hidden.

 

[BeeRich]

OK, tried inserting the very exact syntax into my css file, and she
isn't working. I have a div on top of that, a div below, and she's
aligning from the beginning of the text and clipping the bottom.

This makes no sense. I'm doing this in FF and Safari. Neither wants
to play.

 

[Ben C]

OK, tried inserting the very exact syntax into my css file, and she
isn't working. I have a div on top of that, a div below, and she's
aligning from the beginning of the text and clipping the bottom.

This makes no sense. I'm doing this in FF and Safari. Neither wants
to play.

You need to post a URL.

Or, find the problem yourself. Use Firebug to verify that elements are
getting the computed styles you think they should be getting.

You also have to make sure you've got the containing block right.
Remember a positioned block's containing block is its nearest positioned
ancestor. Use position: relative to make a normal flow block the
containing block for positioned descendents.

 

[BeeRich]

You need to post a URL.

Or, find the problem yourself. Use Firebug to verify that elements are
getting the computed styles you think they should be getting.

You also have to make sure you've got the containing block right.
Remember a positioned block's containing block is its nearest positioned
ancestor. Use position: relative to make a normal flow block the
containing block for positioned descendents.

I fixed it. I entered the new text div and was targetting the
container. So she works now.

Cheers