(转)如何实现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 ...
随机推荐
- HDU 6354 Everything Has Changed(余弦定理)多校题解
题意:源点处有个圆,然后给你m个圆(保证互不相交.内含),如果源点圆和这些原相交了,就剪掉相交的部分,问你最后周长(最外面那部分的长度). 思路:分类讨论,只有内切和相交会变化周长,然后乱搞就行了.题 ...
- Win10累积更新KB3081424安装失败的解决方法
我在个人的PC上多次更新KB3081424都失败了,后来按照网上给出的删除注册表残留项的方法后更新成功了(删除注册表残留项后我还执行了从微软帐户切换到本地帐户的操作,有兴趣的朋友可以试试不切换能否更新 ...
- $ocLazyLoad
博客:http://zhidao.baidu.com/link?url=1eODexxXPsl2gy4UsRnfIqPJnzFrzFk2JJad-cjWDiyCKkb4qxS8scvxoMRqM0Fw ...
- 使用Bootstrap的suggest下拉插件
前端代码 /*html代码*/ <input type="text" class="form-control search_ul" id="ca ...
- torchnet package (1)
torchnet package (1) torchnet torchnet torchnet是用于torch的代码复用和模块化编程的框架,主要包含四个类 Dataset 以不同的方式对数据进行预处理 ...
- UVA-140 Bandwidth (回溯+剪枝)
题目大意:求一个使带宽最小的排列和最小带宽.带宽是指一个字母到其相邻字母的距离最大值. 题目分析:在递归生成全排列的过程中剪枝,剪枝方案还是两个.一.当前解不如最优解优时,减去:二.预测的理想解不必最 ...
- UVA-1605 Building for UN (构造)
题目大意:n个国家的人要在一栋大厦里办公,要求任意两个国家的办公室要相邻(同层同边或邻层同面),设计一个满足要求的方案. 题目分析:题目限制较少,任意构造出一个解即可. 代码如下: # include ...
- 个人知识管理系统Version1.0开发记录(12)
最近碰到个问题,在五个工作日内阅读一个百万行左右代码量的新项目集合,如何解决呢? 第一个工作日,环境观察.待在那个项目组,看项目成员们在做些什么事情,开发,测试,聊天,或多或少可以收集到一些项目相关的 ...
- Alpha阶段敏捷冲刺---Day2
一.Daily Scrum Meeting照片 PS:不要问我们为什么少了个人,某位不愿说出姓名的大佬强行申请要拍照 二.今天冲刺情况反馈 今天我们依旧在五社区五号楼719进行我们的每日立会.经过昨天 ...
- Javascript中的prototype与继承
通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念. 只有构造器才具有prototype属性,原型链继承 ...