当前位置:首页 > Div + CSS

网页中标题过长,截断字符串为省略号

canca10年前 (2016-02-04)Div + CSS704
在设计网页文字列表时,常有碰到标题过长,需要显示截断部分文字,剩下用省略号代替的需求。如果我们采用js操作字符串,按字符个数来约束,遇到中英文混合时,各截取后的字符串长短不一,影响美观。 
最简单做法是采用CSS来截取固定长度的字符串。写法如下: 
Css代码  收藏代码
  1. .title-ellipsis{  
  2.   width:200px;/*调整这里的宽度*/  
  3.   overflow:hidden;  
  4.   white-space:nowrap;  
  5.   text-overflow:ellipsis;  
  6.   text-overflow: ellipsis;/* IE/Safari */  
  7.   -ms-text-overflow: ellipsis;  
  8.   -o-text-overflow: ellipsis;/* Opera */  
  9.   -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/  
  10. }  

扫描二维码推送至手机访问。

版权声明:本文由Ant.Master's Blog发布,如需转载请注明出处。

本文链接:https://iant.work/post/69.html

标签: Div + CSS
分享给朋友:

“网页中标题过长,截断字符串为省略号” 的相关文章

CSS DIV超出范围加(...)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.aspxuexi.com asp学习网</title&…

XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30...…

用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。CSS: filter:alpha(opacity=50);       /* I…

对ie6、ie7、ff兼容性的详细css hack介绍

这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享。以下为引佣:如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可是ie7对!important可以准确说明,会导致页面没...…

DIV满屏显示IE6.BUG

添加如下CSS,显示OK. body{        height:100%; }…

详解CSS的优先权

发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式...…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。