Jquery中文网 www.lfcgx.club
Jquery中文网 >  CSS教程  >  正文 CSS控制的内容超过容器宽度后显示省略号

CSS控制的内容超过容器宽度后显示省略号

发布时间:2019-11-09   编辑:www.lfcgx.club
jquery中文网为您提供CSS控制的内容超过容器宽度后显示省略号等资源,欢迎您收藏本站,我们将为您提供最新的CSS控制的内容超过容器宽度后显示省略号资源
<script>ec(2);</script>

一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可?#28304;?#21040;同样的效果,虽然不完美。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy4868')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4868>li {
     width:50px;
     white-space:nowrap;
     text-overflow:ellipsis;
     overflow: hidden;
     }
</td> </tr> </table>

首先是一个容器,可以是div,li,td等等,先定义宽度,“white-space:nowrap”是强制在一行内显示所有文本,不回行。“text-overflow:ellipsis”就是关键了。
text-overflow是CSS3?#30053;?#30340;属性,IE6以上版本支持。它可?#28304;?个参数:clip [不显示省略标记(...),而是简单的?#20204;衇,ellipsis[当对象内文本溢出时显示省略标记(...)]。所以,这个方法是不支持Firefox的。因此,我们还要加上一句overflow: hidden,让多余文字在ff中隐藏。
虽然打到了效果,但是因为用程序控制这?#20013;?#26524;也很方便,而且没有浏览器兼容性的问题,所以用CSS控制的方法就显得鸡肋了。

</td> </tr> </table>

您可能?#34892;?#36259;的文章:
文本有关的样式和jQuery求对象的高宽问题分别?#24471;?/a>
jquery获取div宽度的实现思路与代码
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
jQuery 动态酷效果实现总结
解决dedecms内容页图片过大不显示或撑破表格
批处理教程之FOR的参数/F之delims详解
JS获取屏幕、浏览器窗口大小、网页高度宽度的方法详解
jQuery滑动插件 Moving Boxes
seo优化之企业网站标题怎么定位
C语言 的 整型数据和浮点型数据

[关闭]
矮木头走势图
怎么倍投大小可以稳赚 马云如何赚钱秘诀 时时彩五星选双胆技巧 给商家拍照赚钱 老虎机游戏平台 黑龙江十一选五开奖数据 江苏时时规则 云南快乐十分开奖结果 手机微信能赚钱的软件叫什么 手机捕鱼平台 三分彩计划 天津快乐10分 辛运28开奖号码 北京麻将作弊器免费 AG空中战争现金游戏 重庆幸运农场开奖号码