Spill overflow text to another DIV

[Andrew Poulos]

Say I have a text area. When the user clicks a button the entered text
displays in a DIV. If there's too much text to fit in that DIV then the
overflow text (the text that doesn't fit in the first DIV) displays in
an adjacent DIV.

Is there a way to know if there's "overflowing" text and, if there is,
if there a way to know what that text is?

Andrew Poulos

 

[RobG]

Say I have a text area. When the user clicks a button the entered text
displays in a DIV. If there's too much text to fit in that DIV then the
overflow text (the text that doesn't fit in the first DIV) displays in
an adjacent DIV.

Is there a way to know if there's "overflowing" text and, if there is,
if there a way to know what that text is?

Andrew Poulos

You could look at the innerHTML of the second div or look for text
nodes with values other than empty strings.

But there is likely some other way related to however you are doing
the overflow.

 

[Andrew Poulos]

You could look at the innerHTML of the second div or look for text nodes
with values other than empty strings.

But there is likely some other way related to however you are doing the
overflow.

Sorry, I think I've not explained it correctly. Text will only go into
the second DIV if it doesn't fit in the first. So my question is
reworded to, given a DIV of a known size and how can I know how much
text will fit in it before it overflows?

I'm happy enough to count lines and words per line but I don't know
where the overflow occurs.

Andrew Poulos

 

[Dag Sunde]

Sorry, I think I've not explained it correctly. Text will only go into
the second DIV if it doesn't fit in the first. So my question is
reworded to, given a DIV of a known size and how can I know how much
text will fit in it before it overflows?

I'm happy enough to count lines and words per line but I don't know
where the overflow occurs.

You can't, unless you hardcode the font size, *and* use a mono-spaced font
(i.e. Courier). And then only if you examine the exact pixel height and
width for that particular size up front.

Can't you solve this another way instead? Autoscroll? Grow the div
vertically?

This is a problem generated by a UI design requirement, so what about
looking
into the design?

 

[Andrew Poulos]

You can't, unless you hardcode the font size, *and* use a mono-spaced font
(i.e. Courier). And then only if you examine the exact pixel height and
width for that particular size up front.

Can't you solve this another way instead? Autoscroll? Grow the div
vertically?

This is a problem generated by a UI design requirement, so what about
looking into the design?

I understand but I was kind of hoping that as a DIV set to overflow:auto
"knows" when its contents overflow that there might be a way for
javascript to detect it.

Andrew Poulos

 

[Martin Honnen]

Andrew Poulos wrote:

I understand but I was kind of hoping that as a DIV set to overflow:auto
"knows" when its contents overflow that there might be a way for
javascript to detect it.

I would think that
divElement.scrollHeight
is larger than
divElement.offsetHeight
if content overflows so detecting that content overflows should be
possible. But identifying and moving the contents that overflows is
another story.

 

[Danny@Kendal]

Say I have a text area. When the user clicks a button the entered text
displays in a DIV. If there's too much text to fit in that DIV then the
overflow text (the text that doesn't fit in the first DIV) displays in
an adjacent DIV.

Is there a way to know if there's "overflowing" text and, if there is,
if there a way to know what that text is?

Not really, at least none that I've heard of, but there are various ways to
hack it.

One way would be to have two or more copies of the text inside clipping
elements.
The 1st element has the text positioned at the top, the 2nd has the text
positioned above the top of the clipping element by the same value as the
height of the 1st element.

I've used 'px' for the size and position rather than 'em' so you can change
the font size and see the apparent reflowing of text into the 2nd box. It's
a quick lash-up but seems to work.

eg:
<!-- FIRST BOX -->
<div style="overflow:hidden; width:200px; height:400px; position:absolute;
top:0; left:0">
<p style="position:relative; top:0"> --- placeholder text --- </p>
</div>

<!-- OVERFLOW BOX -->
<div style="overflow:hidden; width:200px; height:400px; position:absolute;
top:0; left:200px">
<p style="position:relative; top:-400px"> --- placeholder text --- </p>
</div>