Question

I have a requirement for load the html dynamically into div container, this div container style mentioned as overflow is hidden, I am viewing the content by putting next and previous button for navigating to the next and previous page. but the thing is the content is displayed at the beginning and end lines are overlapping in the div.

CSS

content{

            width: 95%;
            height: 200;``
            overflow: hidden;
            position: relative;

}

<div id="content"></div>

using jquery, I am loading the content into div

$("#content").load("../page/index.html");

it loads the content successfully. but the problem is half of the words are showing in the top and remaining are showing the below at the end. so what are the ways are there to truncate this issue.

click this link for demo http://jsfiddle.net/maheshkumar1983/gMfS8/1/

Thanks

Answer 1

We have to use css property multicolumn for solve this issue. when the page gets overflow, it will automatically append to next column of the text.