排列格式,强大的CSS与标签的结合

原创 2007年09月28日 09:49:00

pre标签会原样保留HTML内容的格式,可是如果宽度过大会把页面撑坏,这时候需要自动换行来帮忙:

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

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
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;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:可以实现换行

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

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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

效果:隐藏多余内容

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

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

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

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请到我的留言本提出

下面是提到的例子的效果

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

以上能实现换行,排版的效果,pre标签与与自动换行的结合效果简直棒极了!

我想它们是天生的一对.

比如:

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css 标签格式

Pattern Meaning First Defined in CSS Level E An element of type E 1 E:link an E eleme...

CSS中<li>标签横向排列出现间距问题

HTML代码块: 公告 规则 论坛 安全 公益 CSS代码块: #tabControl .tab-header ...

说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性

向前两个帖子,都是讲的伟大的浮动:它带给我们一个不属于常规流的世界,它不能超出它的包含块,它的位置跟在它之前的元素生成的框有关系(详见前面的浮动规则)…… 那么,它对处于它后面的元素有什么关系呢?对于...

displaytag1.1.jar 强大标签

  • 2008-11-26 17:43
  • 207KB
  • 下载

原来java的正则也很强大,搜索html文档,根据要求替换img标签中的src属性

以前一直以为java的正则太弱了,到今天才发现是自己太弱了,下面记录一个比较复杂的匹配过程:搜索html文档,根据要求替换img标签中的src属性,进行这个操作的目的是为了在发送带图片的邮件时将附件与...

Struts提供的强大的HTML标签库总结

Struts 提供了一个强大的 HTML 标签库来帮助你构建 Web 应用程序。 为了更容易、更快速地进行开发, Struts 提供了功能同其它 JSP 标签库类似的五个标签库,即:...

强大的标签

今天见识到的, 具体跟大家分享下! 尤其是meida属性! HTML 标签 定义和用法 标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。 实例 链接...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)