How to implement CSS to automatically wrap content in web pages

Numbers can make the container expand and cannot wrap automatically according to the size of the container. Here is how to wrap them with CSS!

For div

1. (IE browser) white-space:normal; word-break:break-all; The former here follows the standard. #Wrap {White-SPACE: NORMAL; Width: 200px;}

or

#wrap {Word-Bream: Bream-ALL; width: 200px;}

& lt; div id = "wrap" & gt; 111111111111111111111111111111 & lt;/ div>

Effect: Line breaks can be achieved

2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; There is no good implementation method under the same FF, only Hide or add scroll bars, of course the effect is better without adding scroll bars!

#wrap{white-space:normal; width:200px; overflow:auto;}

or

#wrap{word-break:break-all;width:200px; overflow:auto; }

ddd11111111111111111111111111111111111111

Effect: The container is normal and the content is hidden

For table

1. (IE browser) use the style table-layout:fixed;

.tb{ table-layout:fixed}

< /tr>

abcdefghigklmnopqrstuvwxyz 1234567890

Effect: You can wrap lines

2. (IE browser) Use the style table-layout: fixed and nowrap

< ; /table>

Effect: can wrap lines

3. (IE browser) use the style table-layout:fixed and nowrap when using percentage to fix the td size

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Effect: Both tds wrap normally

4. (Firefox browser) Use style table when using percentage to fix td size -layout:fixed and nowrap, and use div

abcdefghigklmnopqrstuvwxyz 1234567890

< div>abcdefghigklmnopqrstuvwxyz 1234567890 There is no good way to wrap container content under FF. You can only use overflow to hide the extra content so as not to affect the overall effect) For more related articles, please pay attention to the PHP Chinese website (www.php.cn)! Statement： The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn Previous article：CSS Advanced Tutorial Pseudo ElementsNext article：CSS Advanced Tutorial Pseudo Elements Related articles See more Summary of six implementation methods of JSDOMReady event Examples of CSS implementation of various column layouts on the page Pure CSS3 full-screen responsive slideshow effects Pure CSS3 cool colorful 3D button style Stunning CSS3 hexagonal menu animation effects Home Course Q&A My Home Course Article Q&A Dictionary Manual Download Topic Home Article Q&A Course Topic Download Game Dictionary 简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）