Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css 文字溢出省略号样式代码

css 文字溢出省略号样式代码

发布时间:2020-05-14   编辑:www.jquerycn.cn
jquery中文网为您提供css 文字溢出省略号样式代码等资源,欢迎您收藏本站,我们将为您提供最新的css 文字溢出省略号样式代码资源
有时我们在开发时希望标题长度太长了就自动加上省略号了,这样只是用户看不到但搜索引擎还是可以看到,所以这样做对优化是有好处的,下面我来介绍文字溢出省略号实现方法。

例,原本以为文字溢出的处理比较复杂,没想到这么一简简单单的一句话就搞定了,css真是神奇:

 代码如下 复制代码

.li { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

这只是使用了CSS中text-overflow属性,这个属性比较特殊,在现在的CSS手册中找不到,但CSS3中有相关的描述:text-overflow-mode。

它有三个值:clip、ellipsis、ellipsis-word。

clip : 不显示省略标记(…),只是简单的裁切;
 ellipsis : 当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符。
 ellipsis-word : 当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个词(word)。

text-overflow比较特殊,它不能单独起作用,而是必须跟在overflow:hidden后面作为补充说明使用。如果我们要给一个段落添加这个效果,那么可以写:

 代码如下 复制代码

p {
white-space: nowrap;
width: 100%; /* IE6 需要定义宽度 */
overflow: hidden;
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
}

firefox7.0开始兼容text-overflow:ellipsis;这样的话,以后的省略号就可以做到浏览器兼容了,代码片段为:

width:200px;/*设置宽度*/
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
overflow: hidden;/*设置超过的隐藏*/

一个实例

 代码如下 复制代码

 

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用点代替的代码</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</body>
</html>
[/html]

查阅了下,属性如下:

white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到<br>标签为止;

overflow:hidden;不显示超过对象尺寸的内容,就是把超出的部分隐藏了;

text-overflow:ellipsis;当文本对象溢出是显示...,当然也可是设置属性为clip不显示点点点;

您可能感兴趣的文章:
文本有关的样式和jQuery求对象的高宽问题分别说明
JavaScript 特殊字符示例
js 正则表达式之$1$2$3$4$5$6$7$8$9属性及返回子匹配的结果
SQLite常用函数收集
jQuery 动态酷效果实现总结
asp clng与cint的区别及防溢出函数(自定义)
CSS3中如何充分使用视窗单位来布局
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
vbscript instr函数的用法介绍
jQuery当鼠标悬停时放大图片的效果实例

[关闭]