[CSS] for processing that exceeds the div part, css exceeds the div

[CSS] for processing that exceeds the div part, css exceeds the div

A normal front-end attacker usually does not deploy the content outside the div, but if the content is input by the user and then retrieved from the database, in this way, it is normal that the content exceeded the div part, especially this part of the content, which is edited by the user through the editor. This may happen:

For example, to limit a table with a width of PX and a height of PX, you can use the editor to set a table with a size of PX x PX.

<div style="border:2px solid #000000; width:350px; height:100px;">            <table border="0" cellpadding="0" cellspacing="0" width="400" height="400">                <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 only good for English. You can simply use [CSS] div layer boundary to control line breaks in English (click to open the link.

The problem is that tables cannot be compressed! Never think that the columns can be automatically adjusted in a webpage table like Excel ......

In this case, you can use the overflow attribute.

For the above situation, you can add overflow: auto; in the style to solve this problem by adding the scroll bar. I only found this method, if you have a better solution, please refer to the following code:

        <div style="overflow: auto; border:1px solid red; width:350px; height:100px;">            <table border="0" cellpadding="0" cellspacing="0" width="400" height="400">                <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>

The effect is as follows:

For a single line of text, if you want to add it as above, it is generally common in the title, you can use the following method to solve the problem, using the overflow: hidden attribute. Add the text-overflow: ellipsis; white-space: nowrap; attributes, but note that this attribute is only useful for single-line text. If it is multi-line text, to use the back-end language, add a condition structure before the output, and add a dot Based on the length before the output. After all, the front-end is here to help you.

<div style="overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap; "></div>

Finally, paste all the source code of the Gif above. JavaScript code is very simple, and one line is complete.

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">