Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve automatic line wrapping in CSS". In daily operation, I believe many people have doubts about how to achieve automatic line wrapping in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve automatic line wrapping in CSS". Next, please follow the editor to study!

CSS content wraps automatically

How to realize CSS automatic line wrapping for block-level elements such as div,p

Normal text wrapping (Asian and non-Asian text) elements have a default white-space:normal, which automatically wraps when the width is defined.

Html

Wrapping (Asian and non-Asian text) elements of normal text have a default white-space:normal when defined

CSS

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

1. (IE browser) consecutive English characters and Arabic numerals, using word-wrap:break-word; or word-break:break-all; to achieve forced line breaking

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

Or

# wrap {word-wrap:break-word;width:200px;} abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: CSS automatic line wrapping can be realized.

2. (Firefox browser) continuous line breaks of English characters and Arabic numerals, all versions of Firefox do not solve this problem, we can only hide the characters beyond the boundary or add scroll bars to the container.

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

Effect: container is normal, content is hidden

How to realize CSS automatic line wrapping for table

1. (IE browser) use table-layout:fixed; to force the width of table and hide excess content

Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effect: hiding redundant content

2. (IE browser) use table-layout:fixed; to force the width of table, and the inner td,th uses word-break:break-all; or word-wrap:break-word; line wrapping

Abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

Effect: CSS automatic line wrapping can be realized.

3. (IE browser) nesting div,p in td,th, etc. adopt the line wrapping method of div,p mentioned above.

4. (Firefox browser) use table-layout:fixed; to force the width of table. Inner td,th uses word-break:break-all; or word-wrap:break-word; line wrapping, and overflow:hidden; is used to hide excess content. Overflow:auto; does not work here.

Abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

Effect: hide more than content

5. (Firefox browser) nesting div,p in td,th, etc., adopt the methods mentioned above to deal with Firefox

At this point, the study on "how to automatically wrap lines in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.