Overflowing text to another div

1

Hello,

I want to display overflowing text in another div.
With unstyled text I get this implemented cleanly, but as soon as the text has inline styles (e.g. and/or the parent element of the text has styles) it of course doesn’t work correctly anymore.

Does anyone have an idea how I can adopt the styles and inline styles together to the next div?

2

Could you post a snippet of the HTML so I get a better understanding?

3

Example HTML:

<div id="cont1" style="position:absolute;overflow:hidden;height:40px;width:200px;top:0px;left:0px;background:yellow;">
<p id="p1" style="font-family:Arial;font-size:12pt;">
This is <span id="s1" style="color:red;">colored</span> text and far too long for the really small first div. The <b>overflowing content</b> should continue <span id="s2" style="font-family:Times;">in another div on another position</span> within the same or maybe another page.
</p>
</div>
<div id="cont2" style="position:absolute;overflow:hidden;height:300px;width:500px;top:100px;left:300px;background:green;">
</div>

So the overflowing content from the first div (id: cont1) should continue in the second div (id: cont2).

4

That is not an easy one and I guess I found the same JS snippet online that revealed that problem. That snippet splits based on the text node and therefore removes child tags like the span and b.

Are you looking for ‘simple’ columns that sit side by side (which can be done via CSS) or for a true overflow from one div to a second?

5

I search for a true overflow from one div to another. Actually I try to wrap every word in a span (beforehand not in Connect because the Connect Designer hangs up). But in that case I have to be sure that all parent styles will be inherited to the overflowing text.

6

I guess this is something would could improve and perhaps provide a scripting command or other feature to simplify this (for example by introducing data attributes to define the relationship). Something for R&D to research.

7

Actually I use data-attributes for the div-chain (start div and divs for the overflowing text). Child paragraphs and spans with styles also get data-attributes. Than I wrap every single word (text content) in a span with a class (“inlineWordSpan”).

Now I try the following:

  1. Clone the content of the start div to all following divs in the chain.
  2. Count all spans (with class “inlineWordSpan”).
  3. Remove last spans in the overflowing div (and reduce the span counter) until theres no more overflow.
  4. Remove first spans in the cloned contents based on the counter (so that only the overflowing spans stay).
  5. Go to the second div (with overflowing content) and do the same (its a loop over all divs in the chain).

I think I can get it to work but its a very hard work and not as fast as I wish.

I found a nice function in the Connect documentation (pagination script: overflow()). There is also an example code. But I can not find a way to use it in my case (clone also parent elements of the text to adopt the styles). In the internal Connect scripts its hard to loop over child elements, maybe I am doing something wrong there but the normal jquery way with .each does not work as expected, because some jquery functions like find() do not the same (in jQuery you can find elements with find(), in Connect you can only search for text with that function). Maybe there is a way to improve/extend the overflow() function.

It would be great to have a feature like in PrintShop Mail to chain divs.

1 Like
8

Was thinking about another concept, not sure if this would work for you but thouhg it was interesting to share.

I created a script that copies the entire paragraph of the first box and replicates this to the second box (but only when the first box overflows). In this process I check the height of the first box and apply this as negative margin for the cloned paragraph.

Erik

image
image1135×365 19.3 KB

creative-text-overflow.OL-template (8.4 KB)

1 Like