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

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. 初步认识shell

    言语不多说,直奔主题,lz不善于写文章,只是记录自己学习过程中的点点滴滴. 注意:shell对于字母大小写比较敏感. 打开终端出现:username@hostname$或者root@hostname# ...

  2. 汽车常用的ECU芯片

    Power Train ECU的CPU用的比较多的基本来自于Infineon,ST,Freescale BOSCH的16位ECU M(E)7系列主要使用C167内核的CPU,早期的M(E)7系列使用西 ...

  3. uva331 - Mapping the Swaps

    Mapping the Swaps Sorting an array can be done by swapping certain pairs of adjacent entries in the ...

  4. 【S4】使用empty()而不是判断size()是否为0

    1.二者的作用是一样的,结果也是等价的.就是判断集合是否为空. 2.二者是等价的,为什么强调使用empty,因为empty效率更高. 3.在STL中,对于一般的集合,empty和size都是常数时间. ...

  5. GLSL实现Simple Displace Mapping 水仿真流体绘制 【转】

    http://blog.csdn.net/a3070173/archive/2008/11/20/3342062.aspx Dislace Mapping其实就是在顶点着色器中 对顶点进行置换偏移,经 ...

  6. 一步步学Mybatis-以接口操作的方式编程（2）

    上一章节中,我们已经搭建玩了最简单的能够运行的HelloWorld环境,这一章将把上章中的操作方式改为以接口的方式操作 我们可以发现在上一个章节中 public static void testBas ...

  7. 【android开发】Android防止内存溢出浅析

    近期项目做得差点儿相同了,測试出现了一些问题,当中一个就是内存溢出问题,在三星手机上測试最easy出现内存溢出,在其它手机上,比方华为就没有发生,也是比較郁闷.这个问题在之前的公司,做项目时也遇到过, ...

  8. SQL自增长的数据插入

    --子增长的插入 /*创建表*/ create table teacher ( id int identity(1,1) primary key not null, name varchar(20) ...

  9. swift:自定义UICollectionViewFlowLayout

    写作目的 UICollectionView是ios中一个十分强大的控件,利用它能够十分简单的实现一些很好看的效果.UICollectionView的效果又依赖于UICollectionViewLayo ...

  10. 深入理解MYSQL的MDL元数据锁

    1 前言 2 MDL锁与实现 3 MDL锁的性能与并发改进 4 MDL锁的诊断 前言 好久没更新,主要是因为Inside君最近沉迷于一部动画片——<新葫芦娃兄弟>.终于抽得闲,完成了本篇关 ...