最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 正文

网页对象内容自动换行控制方法

来源:动视网 责编:小OO 时间:2025-09-30 08:55:50
文档

网页对象内容自动换行控制方法

网页对象内容自动换行控制方法对于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;实现强制
推荐度:
导读网页对象内容自动换行控制方法对于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;实现强制
网页对象内容自动换行控制方法

 

对于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的宽度,多余内容隐藏 

abcdefghigklmnopqrstuvwxyz12345670ssssssssssssss

效果:隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

abcdefghigklmnopqrstuvwxyz 12345670

abcdefghigklmnopqrstuvwxyz 12345670

效果:可以换行

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;无法起作用

abcdefghigklmnopqrstuvwxyz12345670abcdefghigklmnopqrstuvwxyz12345670

效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

运行代码框

最后,这种现象出现的几率很小,但是不能排除网友的恶搞。

下面是提到的例子的效果

字符换行

div

All white-space:normal;

Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario

IE word-wrap : break-word ;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

IE word-break:break-all;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Firefox/ word-break:break-all; overflow:auto;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

table

table-layout:fixed;

abcdefghigklmnopqrstuvwxyz12345670ssssssssssssss

table-layout:fixed; word-break : break-all; word-wrap : break-word ;

abcdefghigklmnopqrstuvwxyz12345670ssssssssssssssabcdefghigklmnopqrstuvwxyz12345670ssssssssssssss

FF table-layout:fixed; overflow:hidden;

abcdefghigklmnopqrstuvwxyz12345670abcdefghigklmnopqrstuvwxyz12345670

文档

网页对象内容自动换行控制方法

网页对象内容自动换行控制方法对于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;实现强制
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top