壹家門

关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。强制不换行：div,td {white-space:nowrap;}这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。但要是在 IE 的 td 中却很复杂：1.如果没有为 td 指定宽度，则上述代码仍然有效。 2.如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。 3.如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。综合起来，为了简单，使用：div {white-space:nowrap;}只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间需套一层 div。强制换行：强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不会撑大布局。div,td {word-break:break-all;}word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以在Firefox中无效果，为了不让其挤乱表格，可以加上 overflow:hidden 来凑合着解决。知其然知其所以然上面介绍了三种属性：white-space : normal | nowrap word-wrap : normal | break-word word-break : normal | break-all | keep-allwhite-space空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。 nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。word-wrap内容超过容器边界时是否断开转行。normal 允许（只是允许，不是必须）内容顶开指定的容器边界。 break-word 内容将在边界内换行。word-break换行的方式。normal 英文在标点和空白处换行，中文在任何地方换行。 break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。 keep-all 英文和中文都在标点和空白处换行。

在页面上点击链接常出现虚线框…有时候觉得多少有些碍眼（实际上它也是有用滴，提示当前焦点—-随便啥页面按Tab键瞧瞧…虚线框看见了吧~这作用可不小吧^_^），但是，某些时候页面总体美观性会被链接的这一属性给妨碍。那么~有办法去掉它么？当然….是有办法滴~目前的解决办法有以下两种：【第1种方法】IE 下可使用其私有的html属性“hideFoucs”在标签的结构中加入 hidefocus=”true” 属性。即：<a href="http://www.vhuges.com" hidefocus="true" title="欢迎光临时间线">时间线</a>而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：.HideFocus {outline:none;}【第2种方法】也可以仅用 CSS 来控制，即对 IE 的情形使用 e­xpression 表达式，但不推荐使用，毕竟 e­xpression 在性能上有问题。.HideFocus {  hide-focus: e­xpression(this.hideFocus=true);  /* for ie 5+ */   outline: none;  /* for firefox 1.5 + */}除链接外，该 CSS 同样适用于 input 和 button 标签。注：IE6, IE7, FF1.5, FF2, Opera9 测试通过。（opera9 似乎默认就不显示焦点虚线框哈）

网页打印是很多BS系统都会碰到的问题，上一篇探讨了网页打印相对于A4纸的宽高，本篇来说说具体的打印页面应该由哪些基本要素构建…首先，打印页面是为了将WEB页面中需要打印的内容输出到打印机，并保证打印效果符合用户预想。那么打印页面个人以为至少要符合以下要求：1、页面显示内容应该尽可能的与打印效果相符，如果因特殊原因只能放任显示的差异，那么至少要另外提供一个预览页面供用户查阅打印输出内容；2. 打印控制，包括但不限于“页面设置、预览、打印”等操作；打印工具条我们可以采用IE的一款未公开的控件进行打印控制。控件 CLSID:8856F961-340A-11D0-A96B-00C04FD705A2网页打印本来就是很尴尬的解决方案，所以，我们的多浏览器兼容性也就不用考虑那么细致了，IE6/7即可，相信这个要求也不是很苛刻。而打印页面的内容理所当然使用css控制，对于页面中一些不想打印出来的内容，则使用css 的打印标签 @media print{}例如: @media print{.noprint {display:none;}}对于不想打印的段落，层，表格，我们设定其noprint样式即可。打印控制代码如下：<script language="javascript">   function Print() {   if(confirm("确认要打印吗?")) {     document.all.wb.execwb(6,6);   }  }   function PrintView() {   document.all.wb.execwb(7,1); }function PrintSetUp() {   document.all.wb.execwb(8,1);  }       function CloseWindow() {   document.all.wb.execwb(45,1);   window.close();  }  </script><!–控件加载–><script type="text/javascript">  AC_AX_RunContent( 'id','wb','height','2','width','3','classid','CLSID:8856F961-340A-11D0-A96B-00C04FD705A2','name','wb','viewastext','VIEWASTEXT' ); //end AC code</script><noscript><OBJECT  id="wb" height="2" width="3" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" name="wb" VIEWASTEXT></OBJECT></noscript>关于 AC_AX_RunContent()函数的说明，该函数是DW的内置库，用于兼容浏览器的，该库文件我在附件中贴出。打印相关代码使用示例如下：<a href="#" title="页面设置" onclick="PrintSetUp()" /><a href="#" title="预览" onclick="PrintView()" /><a href="#" title="打印" onclick="Print()" /><a href="#" title="关闭" onclick="CloseWindow();" />综合以上几步，我们即可以生成完整滴打印界面。附件：AC_AX_RunContent() 需要引用两个js文件1、AC_RunActiveContent.js2、AC_ActiveX.js 点击下载此文件