CSS常用属性:
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行,只能显示一行 这个只是用适用于单行文本溢出情况,之前处理多行文本的话需要JS来支持。 CSS3新加属性:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //需要组合上面两个属性,参数是显示的行数。 实现一个两行文本溢出省略
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

css实现文本溢出省略号的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  4. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  5. 浅谈文本溢出省略号代表修剪text-overflow

    一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性.  示例 ...

  6. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  7. css文本溢出省略号大总结,如你所愿

    一行: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 两行: width ...

  8. css 文本溢出省略号

    单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: ...

  9. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

  10. css文本溢出省略号

    .ellip{ display: block; width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...

随机推荐

  1. SQL相关知识点

    一.基本概念 数据库术语 数据库(database) - 保存有组织的数据的容器(通常是一个文件或一组文件). 数据表(table) - 某种特定类型数据的结构化清单. 模式(schema) - 关于 ...

  2. 关于 TabControl 获取 被鼠标右键的 TabPage 而编写的函数...

    关于 TabControl 获取 被鼠标右键的 TabPage 而编写的函数... 功能: 1.不需考虑 SizeMode 情况 2.可以获取通过鼠标右键点击的 Tab 3.且顺便返回鼠标左键点的 T ...

  3. windows远程linux桌面

    TigerVNC是一个高性能.平台无关的虚拟网络计算(Virtual Network Computing,VNC)实现,是一个客户端/服务器应用程序,允许用户在远程机器上启动并与图形应用程序进行交互. ...

  4. 利用网络复制安装额外域控制器、利用介质安装额外域控制器、安装RODC额外域控制器

    一.拥有多台域控制器的优势 1.分担用户身份验证的负担,改善用户登录的效率 2.容错功能:若有域控制器故障,此时仍然可以有其他正常的域控制器来继续提供服务,因此对用户的服务并不会停止 二.系统提供两种 ...

  5. python实例1(石头 剪刀 布)

    #random   .randint       模块导入 import random #定义一个用户需要输入的数据内容入口 user = int(input("请输入(石头1,剪刀2,布3 ...

  6. C#开发微信

    C#开发微信门户及应用教程   C#开发微信门户及应用(1)--开始使用微信接口... 6 1.微信账号... 6 2.微信菜单定义... 7 3.接入微信的链接处理... 8 4.使用开发方式创建菜 ...

  7. Python学习笔记--从继承开始继续

    继承的基础语法 单继承: 多继承:一个子类继承多个父类 pass关键字补全语法 注意事项: 复写和使用父类成员 复写父类成员 也就是相当于Java中的方法重写 调用父类成员 变量的类型注解 举例: 更 ...

  8. GO语言学习笔记-测试篇 Study for Go ! Chapter ten- Test

    持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...

  9. Day05笔记

    01.数组类(了解) 1.目的:设计一个类,该类有数组的功能,可以存储数据,可以删除修改数据 2.设计核心数据 1.属性:指针(指向堆区空间),数组实际存储的元素个数,数组容量 2.方法:构造(开辟堆 ...

  10. SQL server分页的三种方法

    一.Entity Framework的Linq语句的分页写法: var datacount = test.OrderBy(t => t.testID) .Skip(pageSize * (pag ...