会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
bluewind2879
走一走,看一看,想一想,做一做
博客园
首页
新随笔
联系
管理
字符串根据宽度自动添加省略号(CSS)
字符串根据宽度自动添加省略号(CSS)
摘自:
http://www.jb51.net/article/3622.htm
关键CSS代码:
text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px
以下是实例:
Code
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
New Document
</
TITLE
>
<
style
>
.ctl
{
table-layout
:
fixed
}
.ctl td
{
text-overflow
:
ellipsis
;
overflow
:
hidden
;
white-space
:
nowrap
;
padding
:
2px
}
</
style
>
</
HEAD
>
<
BODY
>
<
table
cellSpacing
="0"
cellpadding
="1"
width
="100%"
class
="ctl"
border
=1
>
<
colgroup
>
<
col
>
<
col
width
="60"
>
</
colgroup
>
<
tBody
>
<
tr
>
<
td
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
td
>
<
td
>
(1/1)
</
td
>
</
tr
>
<
tr
>
<
td
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
td
>
<
td
>
(1/1)
</
td
>
</
tr
>
<
tr
>
<
td
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
td
>
<
td
>
(1/1)
</
td
>
</
tr
>
<
tr
>
<
td
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
td
>
<
td
>
(1/1)
</
td
>
</
tr
>
</
tBody
>
</
table
>
</
BODY
>
</
HTML
>
实例2: 如果是在<div></div>或者<li></li>里面又怎么做呢?
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
New Document
</
TITLE
>
<
style
>
.ctl
{
}
{
text-overflow
:
ellipsis
;
overflow
:
hidden
;
white-space
:
nowrap
;
padding
:
2px
}
</
style
>
</
HEAD
>
<
BODY
>
<
div
class
="ctl"
style
="width:234;height:99;background:cyan;"
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
div
>
<
ul
class
="ctl"
style
="width:234;"
><
li
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
li
><
li
>
标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻
</
li
></
ul
>
</
BODY
>
posted @
2009-09-05 17:53
边缘凉风
阅读(
285
) 评论(
0
)
编辑
收藏
举报
刷新页面
返回顶部
公告