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. Spring整合Redis学习笔记

    1 Spring-Data-Redis 1.1 Spring-Data-Redis简介   Spring-Data-Redis(简称SDR)对Redis的Key-Value数据存储操作提供了更高层次的 ...

  2. FIR滤波器的设计

    FIR数字滤波器的设计 线性相位FIR滤波器的特点 单位冲激响应:\(h(n),0\leq n\leq N-1\) 系统函数:\(H(z)=\sum_{n=0}^{N-1}h(n)z^{-n}\) 零 ...

  3. 纯js实现字符串formate方法

    function format(pattern){ if(! (pattern instanceof String)){ throw new TypeError("错误的参数类型" ...

  4. ORACLE 去重

    -----------------------------------------------------------------------------模拟数据------------------- ...

  5. 3.javaweb-servlet

    1. 设置编码 tomcat8之前,设置编码: 1)get请求方式: //get方式目前不需要设置编码(基于tomcat8) //如果是get请求发送的中文数据,转码稍微有点麻烦(tomcat8之前) ...

  6. JS和PHP中能转为布尔false的值的对比

    实际开发中经常会使用到JS和PHP中的变量转布尔值进行条件判断,下面对两种语言中转布尔类型结果为false的值进行对比,加深记忆和方便引用. 除了下表列出项,其它的值均转成真值true . 转布尔值后 ...

  7. 初识C 语言

    程序语言 C语言是目前极为流行的一种计算机程序设计语言,它既具有高级语言的功能,又具有汇编语言的一些特性.支持ANSIC. C语言的特点:通用性及易写易读 是一种结构化程序设计语言   具有良好的可移 ...

  8. VsCode新建Java、SpringBoot、Python、JavaWeb项目的基本步骤

    新建Java项目 选中正上方的搜索框,按下F1快捷键,输入create Java,即可出现这样的一个命令: 选中这个: 然后为新创建的项目选择一个合适的位置就好啦! 新建SpringBoot项目 选中 ...

  9. Redis6.0.9集群搭建

    前提条件: Redis版本:6.0.9(因为5.0之前创建用的是redis-trib,还需要ruby,ruby-gem) 安装环境: Centos7 1. 准备配置文件 一个是通用文件:redis-c ...

  10. 【绘制分形图案】多重收缩打印机(MRCM)举例

    note 2020-08-05搬运 下面的内容来自我的CSDN博客 多重收缩打印机(MRCM)是生成分形图案的一种方法.主要思想还是多次迭代.   每次都是将上一次的输出拿来做线性仿射变换后重新组合在 ...