貌似让文本长度随容器宽度变化而发生不同的截取效果也蛮有趣的,这在做弹性布局时很有用。
当然做这个东东没有什么技术含量在里面,不过觉得有点意思,同时好久没Blog一下了...
[演示地址:http://www.doyoe.com/model/xhtmlcss/style/tof2.htm]
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Author" content="飘零雾雨|edzmaster@gmail.com" /><title>test</title><style type="text/css">html,body { margin:0; text-align:center;}div { width:60%; white-space:nowrap; text-overflow:ellipsis;/*for ie6*/ overflow: hidden; margin:0 auto; border:1px solid #aaa;}</style></head><body><div>传说中的测试1传说中的测试2传说中的测试3传说中的测试4传说中的测试5传说中的测试6</div></body></html>
这个例子截取文字的效果会随着窗体大小的变化而变化,拓展一下应该能做其它之用。