CSS截取截取字符长度并显示省略号的方法
HTML部分
<div>
<span>这是一个CSS3截取截取字符的例子。它根据宽度来处理。</span>
</div>
<div class="ut">
<span>无用占位</span>
<a href="#" title="这是一个CSS3截取截取字符的例子。它根据宽度来处理。">这是一个CSS3截取截取字符的例子。它根据宽度来处理。</a>
</div>
<font color="red">注:本写法非本人发明,这样仅介绍了原理。其中当出现多个块显示在一行时截取功能的块只能放最后,由于设置浮动宽度将失效</font>
CSS部分
a {
display: block; /* 当前元素本身是inline的,因此需要设置成block模式 */
white-space: nowrap; /* 因为设置了block,所以需要设置nowrap来确保不换行 */
overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
text-overflow: ellipsis; /* 本功能的主要功臣,超出部分的剪裁方式 */
-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
text-decoration: none; /* 无用 */
}
.ut {
width: 200px; /* 测试长度 */
}
.ut span {
float: left; /* 测试一行显示多块 */
}
CSS截取截取字符长度并显示省略号的方法的更多相关文章
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- js 截取指定字符长度 为数组
str要截取的字符 n截取个数 function jiequ(str,n) { var strArr = []; for (var i = 0, l = s ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- CSS控制文字,超出部分显示省略号
http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
随机推荐
- 将pdf文件通过itunes直接拖到ipad的ibooks里面
开始不太清楚进行过什么设置,使得以前可以直接通过拖动的方式复制pdf文件到ipad里面的方法不管用了.在帖子http://bbs.weiphone.com/read-htm-tid-864091-pa ...
- CGGeometry Reference (一)
知识点 frame 与bounds 的区别 1.frame 是这个视图的大小在父视图的位置 . 如x 20 y 20 width 200 height 300 2.bounds 是这个视图的大小在自 ...
- jquery中取消和绑定hover事件的正确方式
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...
- SPM FDR校正
来源: http://blog.sciencenet.cn/blog-479412-572049.html,http://52brain.com/thread-15512-1-1.html SPM8允 ...
- matlab取整 四舍五入
Matlab取整函数有: fix, floor, ceil, round.取整函数在编程时有很大用处.一.取整函数1.向零取整(截尾取整)fix-向零取整(Round towards zero):&g ...
- 异常和IO
异常 异常是指java程序运行时(非编译)所发生的非正常情况或错误. Java对异常进行了分类,不同类型的异常分别用不同的 Java 类表示,所有异常的根类为 java.lang.Throwable, ...
- Eclipse调试常用技巧(转)
Eclipse调试常用技巧 转自http://daimojingdeyu.iteye.com/blog/633824 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就 ...
- MFC下debug改成release版本出现问题及解决办法
自己在debug下成功运行了自己写的测试自己写第三方库的程序,这里有用到opencv库,所以同时用到了自己的库和opencv的库,需求因为要进行速度的测试,是想要把debug改成release版本,这 ...
- C#中数组Array、ArrayList、泛型List<T>的比较
在C#中数组Array,ArrayList,泛型List都能够存储一组对象,但是在开发中根本不知道用哪个性能最高,下面我们慢慢分析分析. 一.数组Array 数组是一个存储相同类型元素的固定大小的顺序 ...
- express+session实现简易身份认证
本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文章概览 本文基于express.express-session ...