(转)如何实现CSS限制字数,超出部份显示点点点...
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。
有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,
white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这三句,,,嘿嘿....->
本文转载自:http://yangpanwww.iteye.com/blog/1107583
(转)如何实现CSS限制字数,超出部份显示点点点...的更多相关文章
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...
- 如何实现CSS限制字数,超出部份显示点点点...
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
- 如何实现CSS限制字数,超出部份显示省略号
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- css设置文字超出部分显示省略号。。。
兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
- CSS控制 文字超出部分显示省略号
实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...
随机推荐
- about SpringBoot学习后记
<SpringBoot实战>第一章节入门的名称为Spring风云再起 看起来Spring的功能确实受Java开发者喜爱 在SpringBoot中,继续将Spring框架做了另一次的封装使框 ...
- pix2pix-tensorflow搭建及其使用
目录 pix2pix-tensorflow搭建过程 1. 环境搭建 2. 环境说明 3. 开始搭建 4. 训练结果说明 5. 数据集 5.1 图片格式说明 5.3 从先用图片创建图像对 5.4 如何进 ...
- [翻译]将智能指针用于C++的类成员
http://stackoverflow.com/questions/15648844/using-smart-pointers-for-class-members Question: I'm hav ...
- [转][osg]osg渲染引擎框架图,流程图(根据《最长一帧》整理)
转自:http://m.blog.csdn.net/article/details?id=49679731 本文参考<<osg最长一帧>>, <<OpenScene ...
- Java 集合-Map接口和三个子类实现
2017-10-31 22:05:59 Map 将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. HashMap是基于散列表实现的,插入.删除和定位元素时间复杂度平均能达到O ...
- 出错的sql
alter table m_account AUTO_INCREMENT=200029860;
- oracle 10g 用dbms_xmlgen将数据表转成xml格式
oracle 10g 用dbms_xmlgen将数据表转成xml格式 oracle 10g 用dbms_xmlgen将数据表转成xml格式 oracle用plsql将sql查询的所有数据导出为xml
- Linux 下升级JDK 1.7到1.8
1.下载1.8的jdk rpm文件到linux系统 2.执行rpm -ivh jdk-8u151-linux-x64.rpm 选项详解: -a:查询所有套件: -b<完成阶段><套件 ...
- ssh隧道(通过跳板机)连接mysql
案例: A服务器 B服务器 C服务器mysql 现在mysql服务器C只能通过内网访问,B服务器就能通过内网连接访问到mysql A服务器无法直接连接C服务器mysql,所以要通过跳板机(跳板 ...
- asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)
上文件传很常见,现在就文件上传利用HTML的File控件(uploadify)的,这里为大家介绍一下(uploadify)的一些使用方法.在目前Web开发中用的比较多的,可能uploadify(参考h ...