Web ページ内のテキストの幅をページ幅の 62% に設定し、自動的に折り返せるようにするにはどうすればよいですか? _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

効果: コンテナは正常で、コンテンツは非表示になります

テーブルの場合
1. (IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします

< ;テーブル スタイル="テーブル レイアウト: 固定" width="200">
a34de1251f0d9fe1e645927f19a896e8abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
fd273fcf5bcad3dfdad3c41bd81ad3e5
57ff24e834ccf3c89137dd39a0b2885f
05f6583a3f8cc624e349102bc7d89a21abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
86dd15a723baab8759f9e37e592f0e5aabcdefghigklmnopqrstuvwxyz 1234567890

fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

効果:

3 をラップできます (IE 4 で表示)。(Firefox ブラウザー) table-layout:fixed; を使用して、テーブルの幅、内側の td、th を強制します。 word-break : Break-all; またはword-wrap : Break-word ; 行を折り返すため、 overflow:hidden; を使用すると、ここでは機能しません

4b12b3f93428bdef933c5032947d8bc1
a34de1251f0d9fe1e645927f19a896e8
8e7ff0623393cd3c9d6ec18e0b3dd6ccabcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf
53ea5528083346747ca991f3db3f2becabcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
効果: 他のコンテンツを非表示にする

5. (Firefox)ブラウザ）td、thにdiv、pなどを入れ子にし、上記の方法でFirefoxに対応します