"CSS" for processing beyond the div section

A normal front-end siege Lion, the general situation will not be placed outside the DIV, but if this part of the content is entered by the user, and then taken out of the database, then there is content beyond the div part is also very normal, especially this part of the content, is the user through the editor, This can happen:

For example, a table with a width of 350px and a height of 100px is restricted, and the user sets a 400px x 400px table with the editor and overflows.

<div style= "border:2px solid #000000; width:350px; height:100px; " >            <table border= "0" cellpadding= "0" cellspacing= "0" width= "" "height=" >                <tr>                    < TD style= "Background-color: #ff0000; width:200px; height:200px; " ></TD><TD style= "Background-color: #0000ff; width:200px; height:200px; " ></td>                </tr><tr>                    <td style= "Background-color: #0000ff; width:200px; height:200px;" ></TD><TD style= "Background-color: #ff0000; width:200px; height:200px; " ></td>                </tr>            </table>        </div>

This part is simple English OK, directly using the "CSS" div layer boundary on the English Line control problem (click the Open link) to solve it.

Problem this is not a compressed form! Never assume that a Web page table can automatically resize columns like Excel ...

At this point you can take advantage of the overflow attribute.

For this case, you can consider the style of the Overflow:auto, and to this thing to fill the way to solve the scroll bar, I only find this way, if there is a better solution to welcome the communication, the specific code is as follows:

        <div style= "Overflow:auto; border:1px solid red; width:350px; height:100px; " >            <table border= "0" cellpadding= "0" cellspacing= "0" width= "" "height=" >                <tr>                    < TD style= "Background-color: #ff0000; width:200px; height:200px; " ></TD><TD style= "Background-color: #0000ff; width:200px; height:200px; " ></td>                </tr><tr>                    <td style= "Background-color: #0000ff; width:200px; height:200px;" ></TD><TD style= "Background-color: #ff0000; width:200px; height:200px; " ></td>                </tr>            </table>        </div>

Effects such as:

For single-line text, if you want to give it the same as above ..., generally common in the title, you can use the following way to solve, take advantage of the Overflow:hidden property. Then make up the text-overflow:ellipsis;white-space:nowrap; two attributes, but note that this is only useful for single-line text, if it is a multiline text, do a good job to use the back-end language, before the output to add a conditional structure, The output is based on whether the length is dot dot. After all, the front end helps you here.

<div style= "OVERFLOW:HIDDEN;WIDTH:100PX;TEXT-OVERFLOW:ELLIPSIS;WHITE-SPACE:NOWRAP; "></div>

Finally put on the above GIF of all the source code. The code for JavaScript is very simple, and 1 lines are finished.

<!        DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >


"CSS" for processing beyond the div section