(转)如何实现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 3709 Balanced Number(数位DP)题解
思路: 之前想直接开左右两边的数结果爆内存... 枚举每次pivot的位置,然后数位DP,如果sum<0返回0,因为已经小于零说明已经到了pivot右边,继续dfs只会越来越小,且dp数组会炸 ...
- crontab 定时执行脚本出错,但手动执行脚本正常
原因: crontab 没有去读环境变量,需要再脚本中手动引入环境变量,可以用source 也可以用export 写死环境变量. 为了定时监控Linux系统CPU.内存.负载的使用情况,写了个Shel ...
- Django怎么获取get请求里面的参数
获取get请求里面参数的两种方法之三种写法一,当get网址是127.0.0.1:8000/info/?id=20&s_id=30这种类型的网址时 我们在urls的路由的urlpatterns里 ...
- msgsrvmgr.cpp:5:37: fatal error: kdl_conversions/kdl_msg.h: No such file or directory #include <kdl_conversions/kdl_msg.h>
/home/xxx/ros_workspace/src/bp_protocol_bridge/protospot/src/msgsrvmgr.cpp::: fatal error: kdl_conve ...
- package 'yaml-cpp' not found
-- Using these message generators: gencpp;genlisp;genpy -- checking for module 'yaml-cpp' -- package ...
- III USP Freshmen ContestH. MaratonIME gets candies
这题挺有意思的,刚开始不会这交互题,模仿着做了一题就会了,蛮简单 的 这题我用2分,结果wa了,想了一下发现,1到1e9二分50次完全不够用啊,那就转换一下思维,先求出在10^n~10^(n+1)的n ...
- Aizu-2200-floyd+dp
Mr. Rito Post Office 你是一个为远程邮局邮局工作的程序员.你住的地区由几个岛屿组成.每个岛屿都有一个或多个港口城镇.除此之外,还有其他城镇和村庄.为了从一个岛到另一个岛,你必须使用 ...
- iOS UI-应用管理(使用Cell模板)
一.Model // // BWApp.h // IOS_0112_应用管理 // // Created by ma c on 16/1/12. // Copyright (c) 2016年 博文科技 ...
- java并发编程:线程安全管理类--原子操作类--AtomicIntegerFieldUpdater<T>
1.类 AtomicIntegerFieldUpdater<T> public abstract class AtomicIntegerFieldUpdater<T> exte ...
- [转]Ubuntu默认root用户密码
Ubuntu默认root用户密码 在试验的过程中,安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下. 到网上搜了一下,原来是这么回事:Ubuntu的默认root密码 ...