css控制文字溢出用点(省略号)代替

兼容火狐、Opera、chrome的文字溢出添加省略号的功能，当文字或字符超出外层Div的时候，自动隐藏并添加省略号，对前端开发来说，这是个相当不错的CSS特效吧。

示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文字溢出添加省略号</title><style type="text/css">ul,li{ list-style:none; } .textoverflow ul li{display:block;width:180px;margin: 0px 0px 0px 3px;white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;/* for Opera */text-overflow: ellipsis;/* for IE */}.textoverflow:after{     content: "…"; }/* for Firefox */@media all and (min-width: 0px){     .textoverflow:after{         content:"";     }/* for Opera */ }</style></head><body>    <div class="textoverflow">        <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> </ul>    </div></body></html>

　　

时间： 2024-12-28 01:19:40

css控制文字溢出用点(省略号)代替的相关文章

css 控制文字超出部分显示省略号

该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli

【转】html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{     display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : cli

HTML学习笔记7——CSS控制文字的一些基本属性的使用

CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:underline:下划线 overline;上划线 Line-though;删除线 字与字之间的距离:letter-spacing:10px; ……(还有很多属性,可通过查找手册了解相关知识) 二.CSS控制字的大小字体及颜色 字体的颜色:color:blue:蓝色 斜体效果:font-style:i

CSS 文字溢出处添加省略号

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

CSS控制文字只显示一行，超出部分显示省略号

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! </p> 1.text-overflow: ellipsis;  这里的重点样式是  text-overflow: ellipsis; 不过话说te

CSS之文字溢出处理

1.单行文本之三剑客 <p>刘诗诗,原名刘诗施,1987年3月10日出生于北京市,中国内地影视女演员.影视出品人.</p> p{ border: 1px solid red; width: 400px; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 当边框包不住文字时,首先使用nowrap属性设置为一行显示,文字溢出部分使用hidden把它隐藏,隐藏之后用“...”形式

css 样式文字溢出显示省略号

在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;">,溢出样式才有效果 table tbody tr td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注释: white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到<br>标签为止:

文字溢出两行打省略号

两行--谷歌浏览器下兼容: html代码 <p class="contxt-bulka-01">iPhone 6,iPhone 6S Screen protector tekSonic [iPhone 6 and iPhone 6S iPhone 6S iPhone 6S]</p> css代码 .contxt-bulka-01 { display: -webkit-box; height: 35px; word-break: break-all; text-ov