当前位置:首页 > Div + CSS

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

canca10年前 (2016-02-04)Div + CSS598
在设计网页文字列表时,常有碰到标题过长,需要显示截断部分文字,剩下用省略号代替的需求。如果我们采用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&…

On having layout

英文原文在此:http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊...…

[CSS Filter and Hacks] 解決IE vs Firefox等浏览器排版显示不同题

万恶IE成为大家的箭靶也不是第一天了,除了安全漏洞外,最让网页开发者头痛的就是CSS支持的问题,每次在IE上排版完后,在Firefox上看就完全不一样,在Firefox上排好则IE又乱掉了。关于IE或是其它浏览器在显示上面的问题打算整...…

DIV满屏显示IE6.BUG

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

圆角DIV

<STYLE type=text/css> #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsna…

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

  CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。网上你可能能搜索到一大堆的 CSS Hack,但是我今天发布的你可能并…

发表评论

访客

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