未做隐藏处理

执行结果：

1、1行超出部分省略号

效果：

2、多行超出部分隐藏（目前只能在chrome浏览器中使用，其他浏览器不兼容）

　　

效果：

-webkit-line-clamp 属性定义显示行数可以随需求改变

目前开发的使用方式是：

限制文字盒子高度为文字  line-height  大小的倍数，至于其他显示字数由后端限制

效果：

　　

css 文字超出部分隐藏的更多相关文章

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

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

  2. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  3. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  4. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  5. css文字超出一行用点表示

    1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

  6. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

  9. css 文字超出变 ... 点点点

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

随机推荐

  1. CTSC2017密钥、吉夫特

    自己是有多么sb. 密钥 大家都说这是一道普及-的题,一年前我做不起,我可以说我太弱啦,我就普及组水平,今年我还是做不起…… 看大佬题解都是:开个桶就好啦! 我:你在说什么…… 首先把环拉成链,倍长. ...

  2. Python3 中 configparser 模块用法

    configparser 简介 configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字典非常接近.Python2.x 中名为 ConfigParser,3.x 已 ...

  3. 学习JDK1.8集合源码之--LinkedHashSet

    1. LinkedHashSet简介 LinkedHashSet继承自HashSet,故拥有HashSet的全部API,LinkedHashSet内部实现简单,核心参数和方法都继承自HashSet,只 ...

  4. transform的兼容性写法

    大多数浏览器都有自己的私有前缀,IE的私有前缀是 -ms- 但是大多数CSS3属性对IE低版本就不友好了,所以一般IE9+才能用上transform:rotate(7deg); -ms-transfo ...

  5. 【心有猛虎】react-pxq

    这是一个比较完整的简单的react移动端项目,说起来页面少,其实,构思若是精巧,也并不容易做 先放源码:https://github.com/bailicangdu/react-pxq 接下来我们简单 ...

  6. AnalyticDB for MySQL 3.0 技术架构解析

    企业数据需求不断变化,近年来变化趋势日益明显,从数据的3V特性看:体积,速度和变化:Big Data强调数据量,PB级以上,是静态数据.而Fast Data在数据量的基础上,意味着速度和和变化,意味着 ...

  7. 弘康人寿基于 RocketMQ 构建微服务边界总线的实践

    随着互联网+和平台化战略的兴起,各个行业的 IT 系统都在向互联网架构发展,涉及的主要技术包括微服务.消息和弹性计算等,采用微服务架构实现服务高内聚.低耦合,通过异步消息完成交易快速响应和高并发.由于 ...

  8. 【Leetcode Top-K问题 BFPRT】第三大的数（414）

    题目 给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示 ...

  9. MySql实现Oracle的row_number()over(partition by ... order by ...)

    SELECT IF(t1.id = @id,@rownum := @rownum + 1,@rownum := 1)AS rownum, t1.*, @id := t1.id FROM (SELECT ...

  10. left join table_a on ...like...