css3控制标题字数超出的部分自动显示为“...”省略号
css3功能强大,可以让超出指定宽度的部分自动显示为“...”
代码如下
display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:20px;
注意:
1、这个必须是块元素才能实现效果;width是控制显示的宽度的,根据自己的需要做修改;
2、text-overflow:ellipsis;溢出的部分显示省略符号来代替
3、white-space:nowrap;文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
4、overflow:hidden;溢出隐藏,这个大家应该都知道。
优点:有利于优化,因为虽然网页不显示,但是源代码中是有万整的标题,有利于SEO。兼容性比较高。
css3控制标题字数超出的部分自动显示为“...”省略号的更多相关文章
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css控制文本单行或者多行溢出显示为省略号...
p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...
- 如何使用css和jquery控制文章标题字数?
如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- destoon控制标题长度,title中显示全标题 标题字符长度怎么控制?
如题商品调用出来后,标题的字符长度怎么控制?有哪位高手能帮我解决吗? 小弟在此感谢了. &length=30 //30表示30个字节 <!--{tag("moduleid=5& ...
- CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- DT图库列表修改内容标题字数
dt限制标题字数的方法有几种,最简单的是一种是: {dsubstr($t[title], 42, '..')} 还有一种是列表输出,也是网上常用的方法 <!--{tag("module ...
- css3控制字体动态变换颜色
css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- php 全局变量
参考链接:http://www.cnblogs.com/borage/p/3645285.html
- CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
- win10 系统亮度调节
win10系统发行后,许多用户尝试新的系统发现安装之后亮度无法调节,我也多次遇见此情况 故在此记录修改方式: 打开注册表 -> 搜索键值featuretestcontrol -> 修改键值 ...
- html meta标签属性与内容
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- dell md3200i mdss (企业管理) 安装的那点事儿(2)
yum install iscsi-initiator-utils.x86_64yum install iscsi-initiator-utils-devel.x86_64yum install de ...
- docker swarm-mode
root@node1:~# docker versionClient: Version: 1.12.3 API version: 1.24 Go version: go1.6.3 Git commit ...
- 使用zxing生成二维码
public static Bitmap Create2DCode(String str) throws WriterException { // 生成二维矩阵,编码时 ...
- iOS 事件传递(Touch事件)
先总说如下: 1.当手指触摸到屏幕时,会产生UITouch对象和UIEvent对象. 2.这两个对象产生后会被传递到UIApplication管理的一个事件队列中. 3.再有UIApplication ...
- using namespace std 和 using std::cin
相较using std::cin使用using namespace std不会使得程序的效率变低,或者稳定性降低,只是这样作会将很多的名字引入程序,使得程序员使用的名字集合变小,容易引起命名冲突. 在 ...
- Spring mvc时间格式处理
spring mvc中,如果时间格式是yyyy-MM-dd,传入后台会报错,要增加一些配置才可以. 1.修改spring-mvc.xml,增加org.springframework.format.su ...