How to create an overflow option that links to another page if text overflows

Question

I need to know how to create an overflow option that will link to another page once the text overflows by either me or by the browser size increases. I have divs with borders one side an image and the other the text. The text is inside a paragraph tag. This is not in a form at all. I prefer the code in JavaScript but will accept any other languages that will get the job done. I understand for the browser size increases that I can set the font-size but I want everybody including the blind to read the content.

Here is my logic::

Get JavaScript to detect the text size.
Determine if the text has passed the outside borders.
Create page for content. (optional)
Create/display link to rest of content.

I appreciate any help that you all can give.

I understand points 1 and 2. I don't understand points 3/4. Create what page for content? Where? Also, out of curiosity - why aren't you just using overflow so that user can scroll to overflow content? Or some other method of breaking content? http://stackoverflow.com/questions/322929/word-wrap-in-css-js — mrtsherman, Sep 20 '11 at 03:25
it's too late... going to bed... maybe this will help you: http://jsfiddle.net/B9NC9/ — Joseph Marikle, Sep 20 '11 at 03:51

score 0 · Answer 1 · answered Sep 20 '11 at 22:43

To mrtsherman, if I used overflow it will look like an example I made below (tested in Firefox). I apologize for the confusion but the ultimate goal is to detect that the browser’s current text is too large for the divider tag, display a link to the detailed page and cut off all of the text that would typically overflow. I know I am making this a little complex but I would like for any reader to easily read the content. If you would go to tools > Options > content tab - fonts and colors - size: 28 in Firefox you will see big words in a hard to read overview of what the sentence/paragraph is trying to tell you. Simply put I am trying to make it easier to read the overview for reader who has truble seeing. Thank you for your input.

CSS:

.first_div
{
    border: 2px dotted grey;
    width: 415px;
    height: 200px;
    padding: 10px 10px 10px 10px;
    overflow: auto;

}
.second_div
{
    margin: -13px 0px 0px 205px;
    padding: 10px 10px 10px 10px;
    width: 200px;
    height: inherit;
    position: absolute;
    overflow: auto;
    border-left: 2px dotted grey;
}

#picture
{
    background-color: green;
    width: 200px;
    height: inherit;
    color: white;
}

h3
{
    font-weight: bold;
    color: black;
}

Body

<h3>Overflow Example:</h3>
<div class = "first_div">
    <div class = "second_div">  
        <p>
        This div text will be inside.  This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. 
        </p>
    </div>
    <div id = "picture">THIS IS A PICTURE</div>
</div>

How to create an overflow option that links to another page if text overflows

1 Answers1