Web ページ内のテキストの幅をページ幅の 62% に設定し、自動的に折り返せるようにするにはどうすればよいですか? _html/css_WEB-ITnose

假设代码如下：


      文本内容  


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

回复讨论(解决方案)

档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档

补充：纯数字跟连续的英文字母不能实现换行，文字跟单词可以了。

档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档

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

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行

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

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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

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

< ;テーブル スタイル="テーブル レイアウト: 固定" width="200">
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss


2.(IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内部 TD は word-break:break-all または word-wrap:break-word を使用します。 ; 改行

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

効果:

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

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

効果: 他のコンテンツを非表示にする

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