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 what you must pay attention to about Border when writing CSS How to realize multi-style selection and real-time switching of styles_Experience exchange Detailed usage analysis of marquee CSS标题线（删除线贯穿线效果）实现 CSS3中优雅降级和渐进增强的区别 Public welfare online PHP training，Help PHP learners grow quickly！ About usDisclaimerSitemap © php.cn All rights reserved