字符串根据宽度自动添加省略号（CSS）

最新推荐文章于 2023-01-08 20:39:27 发布

weixin_30781107

最新推荐文章于 2023-01-08 20:39:27 发布

阅读量146

点赞数

原文链接：http://www.cnblogs.com/bluewind2879/archive/2009/09/05/1560949.html

版权

摘自： 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 >

转载于:https://www.cnblogs.com/bluewind2879/archive/2009/09/05/1560949.html

weixin_30781107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字符串根据宽度自动添加省略号（CSS）

摘自：http://www.jb51.net/article/3622.htm关键CSS代码：text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:2px以下是实例：Code<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">...
复制链接

扫一扫