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控制标题字数超出的部分自动显示为“...”省略号的更多相关文章

  1. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  2. css控制文本单行或者多行溢出显示为省略号...

    p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...

  3. 如何使用css和jquery控制文章标题字数?

    如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...

  4. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  5. destoon控制标题长度,title中显示全标题 标题字符长度怎么控制?

    如题商品调用出来后,标题的字符长度怎么控制?有哪位高手能帮我解决吗? 小弟在此感谢了. &length=30 //30表示30个字节 <!--{tag("moduleid=5& ...

  6. CSS限制字数,超出部份显示点点点...

    最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...

  7. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  8. DT图库列表修改内容标题字数

    dt限制标题字数的方法有几种,最简单的是一种是: {dsubstr($t[title], 42, '..')} 还有一种是列表输出,也是网上常用的方法 <!--{tag("module ...

  9. css3控制字体动态变换颜色

    css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. Python 局部变量与全局变量

    本来以为 局部变量就是在函数/def/class/lambda内部的变量,全局变量就是在之前这些之外的变量.但是,再一次学习Python atm 中应用时发现了一次特例(意外) 字典中 在函数内部改变 ...

  2. jqueryUI弹出框问题

    jqueryui dialog中 select选不中或比较慢 dialog = function(Window,dialogDivId,title,buttons,css) { css = css|| ...

  3. HTML5的File API读取文件信息

    html结构: <div id="fileImage"></div> <input type="file" value=" ...

  4. springMVC的配置文件路径问题

    ① <init-param> <param-name>contextConfigLocation</param-name> <param-value>c ...

  5. Java课程设计--山寨版QQ

    Java课设要求做一个聊天通讯窗口,索性直接照着QQ撸了一个Demo出来 界面高仿qq,初学JAVA,技术比较渣,不喜勿喷 线程开的比较多性能不是太好,一般电脑开两个客户端聊天就卡卡的 先上图 使用方 ...

  6. Android Studio插件:PlantUML

    标记语言式的UML图编写工具,插件全名:PlantUML integration. 注意这个还要安装另一个软件:http://www.graphviz.org 并在PlantUML的设置中指定其路径. ...

  7. 爬虫 htmlUnit遇到Cannot locate declared field class org.apache.http.impl.client.HttpClientBuilder.dnsResolve错误

    当在使用htmlUnit时遇到无法定位org.apache.http.impl.client.HttpClientBuilder.dnsResolver类时,此时所需要的依赖包为: <depen ...

  8. apache如何解决跨域资源访问

    很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实 ...

  9. Android-RelativeLayout(相对布局)、LinearLayout(线性布局)

    RelativeLayout(相对布局):按照各子元素之间的位置关系完成布局. 定位:android:layout_above="@id/xxx" --将控件置于给定ID控件之上 ...

  10. vmware下centos7桥接模式无法上网

    前一段时间由于想给vm中的centos分配一个独立的IP,就将网络适配器的连接方式由NAT改为桥接,一切顺利. 今天再次开机,IP居然变成了192开头的局域网,并且ping不通外网,经过查找资料,解决 ...