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. 使用bootstrap的日期插件

    1.  需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...

  2. 7九章算法强化班全解--------Hadoop跃爷Spark

    ------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...

  3. dell md3200i mdss (企业管理) 安装的那点事儿(2)

    yum install iscsi-initiator-utils.x86_64yum install iscsi-initiator-utils-devel.x86_64yum install de ...

  4. Visual Studio 2015中创建C#的Android项目提示"Value cannot be null"的解决方法

    由于之前本机已安装过Android SDK,在安装Visual Studio 2015时跳过了,并没有为Xamarin指定对应路径导致.Visual Studio顶部菜单:Tools > Opt ...

  5. java+eclipse+selenium环境搭建

    这几天在学selenium,大头虾的我.安装环境还是遇到了挺多问题,赶紧来记录下.不然下次又...(参考虫师的<Selenium2 Java自动化测试实战>),就随便写写加深下自己的印象. ...

  6. 解决自定义Shiro.Realm扩展类不能用注解(@Resource或@Autowire)自动装配的问题

    问题产生原因:加载Realm时其他Spring配置文件(xml)尚未加载,导致注入失败. 解决方法:编写一个设置类把注入工作提前完成. package com.xkt.shiro import org ...

  7. CentOS下采用Crontab实现PHP脚本定时任务

    简单实现一个需求,每5分钟往特定表中插入2条数据.经过分析还是采用crontab方式靠谱,另外执行php脚本的方式,不用担心链接超时等问题. 1.准备工作,创建1个数据表“person”, CREAT ...

  8. Android selecter背景选择器使用

    android:drawable这个属性是必须的,默认时的背景图片. android:state_pressed布尔值.true指当用户点击或者触摸该控件的状态.默认为false android:st ...

  9. java多线程wait notify join

    wait notify 几个注意点: wait 与 notify/notifyAll 方法必须在同步代码块中使用,即要先对调用对象加锁. 当线程执行wait()时,会把当前的锁释放,然后让出CPU,进 ...

  10. _NSInlineData objectForKeyedSubscript:

    最近总是遇到这个错误:reason: '-[_NSInlineData objectForKeyedSubscript:]: unrecognized selector sent to instanc ...