一、添加-文字显示超出范围时隐藏属性

overflow:hidden;

二、添加-超出文字省略号属性

text-overflow:ellipsis;

三、添加-文字不换行属性

white-space:nowrap;

CSS - 实现文字显示过长时用省略的更多相关文章

  1. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  2. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  3. css控制文字显示长度，超过用省略号替代

    .line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...

  4. ant design table td 文字显示过长添加省略号、ant 文字过长时添加tootip提示

    方法1: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit ...

  5. css：文章标题过长时，使用省略号

    html代码 <ul> <li><a href="" target="_blank">我是文章1,现在标题过长,使用css加 ...

  6. css让文字显示特定行数，多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...

  7. 使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）

    前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...

  8. css 控制文字显示两行,多余用省略号 手机端

    p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...

  9. 关于echarts中的饼状图的label文字显示过长的问题

    label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('￥') cons ...

随机推荐

  1. 快速找到跟踪其他session产生的trc文件

    掌握该技术最根本的是需要搞清楚session跟踪文件存放的路径和生成跟踪文件的命名规则,不然,在已经存在成全上万trc文件的生产环境中,要想快速正确的找到跟踪其他SESSION产生的trc文件就如大海 ...

  2. HITAG 1/2/S

    HITAG S -- 3rd generation HITAG™ family Modulation Read/Write Device to Transponder: 100 % ASK and B ...

  3. inline-block 前世今生

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  4. ibatis基本内容简介

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2002年发起的开放源代码项目.于2010年6月16号被 谷歌托管,改名为MyBatis.是一个 ...

  5. C#缩放和裁剪图片

    在GDI+中,缩放和剪裁可以看作同一个操作,无非就是原始区域的选择不同罢了.空口无凭,先看具体算法可能更好理解. using System; using System.Collections.Gene ...

  6. 【JavaScript】关于javascript原型的深入理解

    http://mozilla.com.cn/post/21667/ http://liuzhijun.iteye.com/blog/1157453 http://liuzhijun.iteye.com ...

  7. 【JavsScript】当 JavaScript 从入门到提高前需要注意的细节：变量部分

    在javaScript中变量使用var声明的变量是当前作用域的变量,不使用var声明的则肯定是全局变量. http://msdn.microsoft.com/zh-cn/library/dn64545 ...

  8. Ambari源代码分析之总览

    一.基本概念: Resource:Ambari把能够被管理的资源的抽象为一个Resource实例,资源能够包括服务.组件.主机节点等,一个resource实例中包括了一系列该资源的属性: Proper ...

  9. IOS文件存储小结

    转自:http://tyragain.lofter.com/post/84706_c1503 首选项设置存储 NSUserDefaults 以及通过它控制的SettingBundle  NSUserD ...

  10. Linux下的线程

    一.线程的优点 与传统进程相比,用线程来实现相同的功能有如下优点: (1)系统资源消耗低. (2)速度快. (3)线程间的数据共享比进程间容易的多. 二.多线程编程简单实例 #include < ...