Heim > Artikel > Web-Frontend > 如何设置一段文字，是它的宽度是页面宽度的62%且能自动换行？_html/css_WEB-ITnose
如何设置一段文字，是它的宽度是页面宽度的62%且能自动换行？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:381356Durchsuche
假设代码如下：
<html><body>文本内容</body></html>
这个文本内容很长，希望整个网页的宽度就是屏幕的宽度，这个文本内容的宽度是屏幕宽度的62%且能自动换行，该如何处理？
回复讨论(解决方案)
<body><div style="margin:0 19%; line-height:1.5;">档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</div></body>
补充：纯数字或者连续的英文字母是不行的。需要另外的写法。文字和英文单词可以实现换行。
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是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
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
效果：隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
效果：可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用
| abcdefghigklmnopqrstuvwxyz1234567890 | abcdefghigklmnopqrstuvwxyz1234567890 |
效果：隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何设置网页中的一段文字，使它的宽度是页面宽度的62%且能自动换行？_html/css_WEB-ITnoseNächster Artikel：关于一个浏览器样式兼容的问题_html/css_WEB-ITnose