用CSS截断过长数据

总结了一下大概有以下几种:

1.定宽截断

.demobox{
  width:200px;
  overflow:hidden;
  height:2em;
  line-height:2em;
  word-break:break-all;
  text-overflow:ellipsis; /* IE中截断后加上... */
  white-space:nowrap;     /* 不换行 */
}

效果:

如果不考虑长字符串的情况那么只需要 overflow:hidden和height属性就可以了，把换行的数据都hidden掉，间接实现截断效果，嘿嘿。

PS: FF中去掉white-space:nowrap属性就不会出现截断半个中文字的情况了

2.自适应宽度截断

如果内容有长字符串或者是加了white-space:nowrap的话，那么是会把外部容器撑破的，于是就不能自适应宽度截断了。

这里我利用了一下table的table-layout:fixed来间接实现。table在fixed模式中,td(或th)不会因为里面内容的大小而改变大小。[Gmail和QQmail的邮件列表都是采用这种方法 ]

先简单看一下效果：

table用了fixed模式并且设置了width:100%,那么table以及td的宽度就只有200px了，溢出的内容用overflow:hidden隐藏掉，于是便实现了自适应宽度的截断效果。
当然这方法也是有弊端的，首先为了实现效果把html结构弄复杂了，其次是(看下图)

截断的单元格与旁边的数据贴得太近了，并且padding-right是控制不了的。Gmail用了个十分懒的方法，在两个td中间塞多一个空白的td把两列数据分开，看起来会美观些。而QQmail是在次列td里面放置一个div元素，设置适当的margin把截断的数据撑开，让数据看起来不会连成一块。我决定塞个&nbsp进去好了，省事

Tui css framework is available.

为了偷懒加快工作效率，早在半年前我就决定写一个CSS框架，到今天….它终于可以用了！

恰好公司正在折腾web栅格布局 ，所以也顺便一起整了。

说起CSS框架常见的有倡导栅格布局的 960grid 以及taobao的grid css(不知正名为何)，还有特立独行的YUI（YUI中用em定宽以及负margin的使用方法十分令偶向往）。

于是综合了各框架的一些设计理念及实际情况，在YUI基础上修改开发了自用css框架tui….

主要是重写了YUI中的一些宽度数值，去掉一些不常用的css，添加一些ooxx。

目前TUI的功能有

• 支持页面宽度：自适应、950px、974px、1190px
• 左右侧边栏宽度：150px、190px、230px、270px、310px
• 百分比布局：与YUI3.0相同(修改中)
• 简单的css-reset

YUI中font-size是设置成13px的，印象中中文宋体在12px、14px中的显示效果会比较好。所以像素级测试了一下。

发现宋体在12px、13px的时候其实都是一样大的。唯一的区别是的13px的字宽比12px大1px，说白了就是字与字间多1px的间隔。并且相比13px，我觉得12px太挤了，看起来有点视觉疲劳。

于是Tui中沿用YUI的13px设定。(只在vista、win7中测试，不知未开启clearType的机子会咋样)

同学们到这里可以查看简单的Demo   <-[2010/6/16失效]

模块化CSS设计(一) – 图标

前言：

最近半年多的时间里我都在参与TAPD项目的设计与前端开发。之所以把设计和前端开发一起承担主要是考虑到一种较为理想的设计流程，在进行设觉设计 的同时把Html、CSS的实现都考虑进去，这样无论是设计还是代码都是统一的设计理念和风格，便于维护和后续开发。后来发现TAPD的规模远大于自己所 想，交互研究、视觉设计、代码设计每一部分都是一份庞大的工作，每个页面的设计与实现都没有太多的时间仔细琢磨…还好后期英明的Boss把设觉与交互 设计部分交给了其他同事，我才得以对前端代码仔细研究，用了一个月的时间把所有Html与CSS进行重构。

本系列文章将跟大家分享我在TAPD项目上关于CSS架构设计的一些心得，譬如命名、灵活性等，不会涉及太多CSS技巧。

由于是想到什么就写什么，各章节之间没有什么必然的联系，希望大家看后有能有所收获。m(_ _)m

-  by ceil  2009/5/11

模块化CSS设计(一) －－－ 图标

一般来说页面上的图标会用下边的两种形式撰写：

<a href=”#” title=”Edit”><img src=”[url]” alt=”Edit” /></a>

<a href=”#” class=”btn_edit” title=”Edit”>Edit</a>

前者：直接插入图标的图片，好处是该按钮是inline-block，可以很方便的插入到页面任何地方。譬如说放到一段文字的中间。

后者：用CSS背景定位的把图标显示出来，并且把Edit文字隐去，相比前者降低了表现与逻辑的耦合性，更好的Html语义化。不过为了让图标有高度和宽度，一般情况会 把<a>加上display:block，然后用background-image把图标放进去。那么弊端也是显而易见的，假设我需要把一个 图标插入到一句话的中间，那么由于display:block的存在会直接导致图标与其他文字换行显示。

综合两者的优点，我在TAPD中是这么定义一个图标的:

<a href=”#” class=”tag_bug”><i>Bug</i></a>

这样TAPD的图标的不但具有<img>形式的灵活性，同时减少耦合性、更好SEO、更好的HTML语义化…etc

(因为要兼顾IE6/7/8、Firefox、Safari、Chrome中display:inline-block的实现，所以迫不得已要额外加一个<i>标签用于将文字隐藏。)

按照yahoo的rules for high performance web sites的原则，应当减少Client与Server端间的HTTP请求次数。

我还用到CSS Sprite，将多张图标图片组装成单独的一张图片，用background-position显示不同的图标

也许有人会问：

<a class=”btn_edit”></a>

这么写不会更简单么？并且可以减少html和CSS代码？何必要写成<a class=”btn_edit”><i>Edit</i></a>

其实我坚持在标签里写文字一方面是基于SEO的考虑，另外还考虑到一种情况，假设突然有一天我们的客户觉得编辑按钮图标太糟糕了！要求直接直接用文字。那么我稍微修改一下CSS文件便可以巧妙的把原来的图标变成一个文字链接了。又或者是客户由于某些原因访问不了TAPD的CSS文件，标签里没有文字的会变得一片空白，无法使用。

另外由于IE6对透明背景的PNG图片支持不好，所以大部分不规则图标我都是用gif格式。但是有时候gif的256色不能满足设计师的设计要求(设计师A：俺的作品多姿多彩，256色怎么够用！！)。

所以在CSS sprite的时候我是合成了两张图片，一张对色彩要求不高并且需要透明背景的GIF图片和一张对色彩要求高的PNG图片。