网页被连续性英文字符或图片撑破的解决办法
上上篇介绍给网站加入迅雷下载链的日志里 迅雷的链接把超出页面范围跑到侧边栏去了。使页面非常难看。如下图
这是因为连续的英文或单词不能自动换行的结果。如果在评论中输入一连串的英文字符会出现截断的情况，看下图
剩余的字母已经超出范围看不到了。
那么如何防止网页被撑破或文字内容被截断呢？可以用CSS来实现，方法如下：
在body里加 word-break: break-all; 当然也可以在table和div里加。用它来设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文，应该使用break-all 。如代码
body {
font: 12px/18px Verdana, Helvetica, Arial, Geneva, sans-serif;
color: #333;
background: #728776 url(/themes/Devart/images/bg.gif) repeat-x;
white-space: -moz-pre-wrap;
WORD-BREAK:break-all;
}
加入后的日志效果可以到原文观看，评论中的效果如下图（内容没被截断而全部出现）
word-break用法如下：(注意:只对IE和chrome起作用)
word-break : normal | break-all | keep-all
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
对于火狐用white-space: -moz-pre-wrap;
如何在网页中限制图片的最大尺寸呢？
以下代码是对评论中图片所做的限制：
#comments .comment .comment-content img{ max-width:97% !important; max-height:97% !important}
相关阅读：
本文网址:http://www.houkai.com/2009/09/25/character-autoLF.html
| Published by |  |
Original source : http://www.houkai.com/2009/09/25/character-autoLF....
0 Responses to “网页被连续性英文字符或图片撑破的解决办法”
Leave a Response