文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行。不折行:

div {
white-space:nowrap;/* 规定文本是否折行 */
overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
text-overflow: ellipsis;
/* 规定超出的内容文本省略号显示,通常跟上面的属性连用,因为没有上面的属性不会触发超出规定的内容 */
}

折行(能主动控制行数,这里设置的超出 4 行显示省略号):

div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-line-clamp:; /* 控制最多显示几行 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}

css 文本省略号显示的更多相关文章

  1. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  2. CSS文本溢出显示省略号

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

  3. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  4. css 文本省略号设置

    本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...

  5. css 文本两行显示,超出省略号表示

     重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...

  6. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  7. css文本截字,超出文本省略号显示

    一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...

  8. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

    为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:

随机推荐

  1. django同一个项目中连接多个数据库

    一.场景与思路 同一个项目中需要连接多个数据库. 二.代码 代码中主要是三个部分,settings.models以及自己写的一个类. 1.自己写的文件:database_app_router.py  ...

  2. DBA面对新mysql环境

    来源:http://blog.csdn.net/wyzxg/article/details/8491152 author:skatetime:2013/01/10 DBA面对新MySQL环境感悟 1. ...

  3. Win10-安装.net 2,3,.3.5

    win10x64(ver1809).iso放镜像到光驱后执行cmd(.net3.5包括2和3)dism.exe /online /enable-feature /featurename:NetFx3 ...

  4. Jackson动态处理返回字段

    有时候业务需要动态返回字段,比如, 场景一:返回 name , birthday, createDate 场景二:返回name, birthday, age 现做个备忘录,以便参考. 下面是引入的PO ...

  5. python代码组织及模块使用

    python代码组织 python和其他编程语言一样,采用包管理代码,一个包中可包含许多模块. 使用模块最大的好处是大大提高了代码的可维护性.其次,编写代码不必从零开始.当一个模块编写完毕,就可以被其 ...

  6. ab接口压力测试工具使用

    ab的使用 模拟并发请求100次,总共请求10000次 命令模板: ab -c 100 -n 10000 待测试网站(建议完整路径) 内容解释: Server Software: nginx/1.10 ...

  7. convirt集中管理平台搭建

    情况说明: (1)本文采用OEL6.3x64操作系统,需要有KVM安装环境.(2)convirt2.1.1采用源码方式安装,convirt环境分别两部分,一部分是cms,用于管理kvm/xen虚拟主机 ...

  8. (Linux基础学习)第二章:CentOS7.4安装教程

    001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 ...

  9. SpringCloud2.0 Turbine 断路器集群监控 基础教程(九)

    1.启动基础工程 1.1.启动[服务中心]集群,工程名称:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) ...

  10. 关于ServletContext的私有方法全局获取返回null问题getServletContext().setAttribute("count", 1)

    1.在Servlet重写了init方法中获取getServletContext()报错提示为空指针 重写了init(ServletConfig)方法,但是重写的init方法内部没有调用super.in ...