How to set a piece of text in a web page so that its width is 62% of the page width and it can wrap automatically? _html/css_WEB-ITnose

假设代码如下：


    100db36a723c770d327fc0aef2ce13b1 6c04bd5ca3fcae76e30b72ad730ca86d 文本内容 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e


这个文本内容很长，希望整个网页的宽度就是屏幕的宽度，这个文本内容的宽度是屏幕宽度的62%且能自动换行，该如何处理？

回复讨论(解决方案)

6c04bd5ca3fcae76e30b72ad730ca86d
a217c2ee7038a89da696e184102090e4
档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
补充：纯数字跟连续的英文字母不能实现换行，文字跟单词可以了。

30e4b45f7689c137f6fbb37f114ad5f9
档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档
16b28748ea4df4d9c2150843fecfba68

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
4e6249b8f82161255a54f5b2fcbec820正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义16b28748ea4df4d9c2150843fecfba68
css
#wrap{white-space:normal; width:200px; }

1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

4e6249b8f82161255a54f5b2fcbec820abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111116b28748ea4df4d9c2150843fecfba68

效果：可以实现换行

2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

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

4e6249b8f82161255a54f5b2fcbec820abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111116b28748ea4df4d9c2150843fecfba68

Effect: The container is normal and the content is hidden

For table

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

2b94abb815df9b9ee3c7b29b44ef15cb
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cabcdefghigklmnopqrstuvwxyz1234567890sssssssssssss
5105756b99e0de69447d2a49209d0d3f
f16b1740fad44fb09bfe928bcc527e08

Effect: Hide redundant content

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

4f8a34af9dbf6a34d21d1abb867de88e
a34de1251f0d9fe1e645927f19a896e8
c6c2529fd720f2016455f1748d857a46abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
94b81e6ec5e2296447a9ddc6de06b1c0abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

Effect: Line wrap

3. (IE browser) Nest div, p, etc. in td, th using the above mentioned div, p line wrapping method

4. (Firefox browser) use table- layout:fixed; enforces the width of the table. The inner td, th uses word-break: break-all; or word-wrap: break-word; to wrap the line, use overflow:hidden; to hide the excess content. Overflow:auto; cannot be used here. Function

2b94abb815df9b9ee3c7b29b44ef15cb
a34de1251f0d9fe1e645927f19a896e8
8fcf32b75db8f8e91b84423f79e7844eabcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf
98baccb5268ebf63f9f5a551ea57e48babcdefghigklmnopqrstuvwxyz1 2345678904f8426b303fd482c2b5cad5323c6ce0d
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

Effect: Hide more than content

5. (Firefox browser) Embed in td,th Set div, p, etc. using the method mentioned above to deal with Firefox