想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度，然后添加以下属性

  1. overflow: hidden;/*内容超出后隐藏*/
  2. text-overflow: ellipsis;/*超出部分以省略号显示*/
  3. white-space: nowrap;/*文本不进行换行*/

显示结果就是这样

点击查看多行显示隐藏的解决方法

css 超出部分以省略号的形式显示的更多相关文章

  1. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  2. CSS常用字体属性(多出的文本隐藏，或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性：background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  3. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  4. css 超出宽度出现省略号

    display: block; overflow: hidden; width: 260px; white-space: nowrap; text-overflow: ellipsis;

  5. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  6. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  7. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  8. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  9. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

随机推荐

  1. Visual Studio性能计数器，负载测试结果分析- Part III

    对于一个多用户的应用程序,性能是非常重要的.性能不仅是执行的速度,它包括负载和并发方面.Visual Studio是可以用于性能测试的工具之一.Visual Studio Test版或Visual S ...

  2. 收集vcftools所有用法

    VCFtools用来处理VCF文档. 筛选特定突变 比较文件 总结突变 转化文件格式 验证并合并文件 取突变交集和差集 Get basic file statistics input可以为VCF或BC ...

  3. Redis报错：redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snap

    首先找到出现错误的原因: redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snapshots, but ...

  4. 利用编辑器漏洞ewebeditor-fckeditor-southidceditor

    ewebeditor 默认数据库路径:[PATH]/db/ewebeditor.mdb [PATH]/db/db.mdb [PATH]/db/%23ewebeditor.mdb 默认密码:admin/ ...

  5. Volley 源码解析（转）

    项目:Volley,分析者:grumoon,校对者:Trinea 本文为 Android 开源项目源码解析 中 Volley 部分项目地址:Volley,分析的版本:35ce778,Demo 地址:V ...

  6. python-锁机制

    锁 Lock() Lock(指令锁)是可用的最低级的同步指令.Lock处于锁定状态时,不被特定的线程拥有.Lock包含两种状态——锁定和非锁定,以及两个基本的方法. 可以认为Lock有一个锁定池,当线 ...

  7. System.Web.Caching.Cache类 缓存 各种缓存依赖(转)

    转自:http://www.cnblogs.com/kissdodog/archive/2013/05/07/3064895.html Cache类,是一个用于缓存常用信息的类.HttpRuntime ...

  8. 为什么各大网站都纷纷用起了https？哪些网站需要https（SSL证书）

    其实最近我也在易维信网站的开发组内讨论应用全站https事宜. 其原因非常简单. 因为不断接到用户投诉说网站上出现影响浏览体验的大面积广告. 可是网站平常只针对未登录用户在顶栏和底栏打两小条广告.而且 ...

  9. OC weak strong __weak __strong copy retain assign nonatomic atomic等关键字的总结

    weak和strong的区别: weak和strong)不同的是 当一个对象不再有strong类型的指针指向它的时候 它会被释放 ,即使还有weak型指针指向它. 一旦最后一个strong型指针离去 ...

  10. IDEA tomcat部署

    一.前言     1.CATALINA_HOME和CATALINA_BASE两个变量的区别:前者是tomcat的安装目录,后者是tomcat实例的目录.(安装一个tomcat,可以启动多个tomcat ...