『截字』是网页设计当中最头疼的事情了吧!
2009-05-05 12:17
218 查看
『截字』是网页设计当中最头疼的事情了吧。
当字数超过容量,要么是超出,要么是换行,无论怎样都会破坏布局。要避免出现这种情况,就必须进行截字。截字的操作在前后端都可以做,也都应该做。其原因是无论那种截字,都会漏洞,所以双保险比较好。
先简单说一下后台程序截字会出现的问题。
按字符数来截字的方法是错误。因为英文字母会比中文汉字要短,“超长的标题”就比“title”要长。
按字节数来截字,也有些问题。我们可能会按照一个汉字等于两个英文字母来作为截字的标准。但是事实上,“MM”比“妞”就要长。
即使是英文字母之间,长度也不同。最长的字母应该是“W”,最短的字母应该是“i”。所以不能通过字母的个数判断长度。
但是,无论如何,按字节数截字,多少可以大致控制长度,这是一个比较简单可取的方法。
好,说说前端的部分:
在所有可变字段的地方,记得加上overflow:hidden。
但这样做会带来一些负面的影响。首先overflow:hidden可能会让下拉框或浮动层也被截掉,要注意。第二,overflow:hidden会闭合元素(和overflow:auto一样的效果)。
如果不想字数太多而换行,记得写上white-space: nowrap。
反过来,如果不想字数太多而冲破宽度,记得写上word-wrap:break-word和word-break:break-all。当然,这个只对IE有效,而且非标准。如果想要在Firefox中也能自由换行,得用脚本,但我觉得太浪费客户端资源。
其实道理很简单。但是实际做的时候,每处记得考虑截字这个问题,确实不是那么容易。充分考虑健壮性,永远是对优秀程序员的要求,做网页也一样。
当字数超过容量,要么是超出,要么是换行,无论怎样都会破坏布局。要避免出现这种情况,就必须进行截字。截字的操作在前后端都可以做,也都应该做。其原因是无论那种截字,都会漏洞,所以双保险比较好。
先简单说一下后台程序截字会出现的问题。
按字符数来截字的方法是错误。因为英文字母会比中文汉字要短,“超长的标题”就比“title”要长。
按字节数来截字,也有些问题。我们可能会按照一个汉字等于两个英文字母来作为截字的标准。但是事实上,“MM”比“妞”就要长。
即使是英文字母之间,长度也不同。最长的字母应该是“W”,最短的字母应该是“i”。所以不能通过字母的个数判断长度。
但是,无论如何,按字节数截字,多少可以大致控制长度,这是一个比较简单可取的方法。
好,说说前端的部分:
在所有可变字段的地方,记得加上overflow:hidden。
但这样做会带来一些负面的影响。首先overflow:hidden可能会让下拉框或浮动层也被截掉,要注意。第二,overflow:hidden会闭合元素(和overflow:auto一样的效果)。
如果不想字数太多而换行,记得写上white-space: nowrap。
反过来,如果不想字数太多而冲破宽度,记得写上word-wrap:break-word和word-break:break-all。当然,这个只对IE有效,而且非标准。如果想要在Firefox中也能自由换行,得用脚本,但我觉得太浪费客户端资源。
其实道理很简单。但是实际做的时候,每处记得考虑截字这个问题,确实不是那么容易。充分考虑健壮性,永远是对优秀程序员的要求,做网页也一样。
相关文章推荐
- 网页设计中另人头疼的浏览器兼容问题
- 分享网页设计当中使用进度条打造精美界面最佳例子
- 弹出网页窗口设计全攻略 [转]
- 网页设计对图片的选择应用
- HTML学习笔记——标准网页设计+使用CSS、Javascript
- 网页设计大赛第十五天
- 网页设计的12种颜色
- 推荐13款优秀的网页线框图设计和制作工具
- [网页设计] 27款后台管理页面设计 DIV+CSS+JS
- 网页设计每屏分辨率研究
- css网页设计
- 2013年那些脱颖而出的网页设计作品【系列一】
- 60佳灵感来自大自然的网页设计
- 60佳优秀的 Photoshop 网页制作教程【下篇】 留着慢慢设计
- iOS当中的设计模式
- 经典网页设计:应用四边形的16个超酷的国外网站
- 用CSS进行网页样式设计全集
- 网页设计实训项目八——框架布局
- HTML网页设计每日笔记(给初学者的一份礼物)(第六节)
- 2013年值得我们学习的网页设计作品【系列二】