看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾。今天就说说单行文本,多行文本溢出时怎么显示省略号?

单行

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

多行

display: -webkit-box; /*将对象作为弹性伸缩盒子模型展示*/
-webkit-box-orient: vertical; /*是用来伸缩盒子对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*是用来限制一个块元素现在文本的行数*/
overflow: hidden;

刚刚看了下简书首页文章列表里面,li里面就有...,而我这样写是没有的,只是显示出来有省略号,所以我觉得可以截取固定字数再加一个省略号作为li标签里面的文本这样是不是就会好多了。

css实现文本溢出显示省略号的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

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

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

  3. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

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

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

  5. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  9. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

随机推荐

  1. java float double bigdecimal

    java 有 float,double,BigDecimal 三种,前两者会损失精度,最后一个是专门用于高精度计算的大数类型,但是会损失性能.如果用于金融场合且小数位并不多的时候,可以考虑 BigDe ...

  2. CSS单元的位置和层次-div标签

    我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...

  3. Yii2框架GridView自带导出功能最佳实践

    1. 导出excel的实现方法 (1)使用phpexcel封装工具类导出excel (2)使用爬虫爬取页面再处理封装工具类导出excel (3)使用页面渲染后处理html添加头部信息生成excel文件 ...

  4. static类型的变量

    c语言中变量的储存类型有以下四种 auto  如果没有定义储存类型  默认就是这个类型  比如  int a = 10;  储存类型就是 auto:编译器会跟你定义的位置,以及用途,自动帮你决定使用那 ...

  5. How to flash Havoc on enchilada

    update fastboot and adb fastboot oem unlock adb debug enchilada reboot to fastboot fastboot devices ...

  6. A Simple Problem with Integers(线段树区间更新模板)

    最基本的线段树的区间更新及查询和 用tag(lazy)数组来“延缓”更新,查询或添加操作必须进行pushdown操作,即把tag从p传到lp和rp并清楚tag[p],既然得往lp和rp递归,那么就可以 ...

  7. bzoj2762-[JLOI2011]不等式组

    求 \(x=k\) 时满足一元一次不等式 \(ax+b<c\) 的个数. 解出 \(\frac{c-b}{a}\) 之后取整,得到合法区间,用树状数组维护. 注意 \(a\) 的值域是 \([- ...

  8. delegate--委托

    delegate--委托 (可以把委托看成用来执行方法的一个东西) eg: namespace delegateTest{ delegate double MathsOp(double x); cla ...

  9. 李昊大佬的CV模板

    #include<cstdio> #include<iostream> #include<cstdlib> #include<iomanip> #inc ...

  10. HDU5384-Hotaru's problem-Manacher

    找出紧挨的三个回文串,例如abccbaabc ,形如ABA格式,其中AB为回文串.计算最长的长度. 首先用Manacher处理回文半径.然后就是找到两个点,都是偶数的回文串,并且共享了中间一段. 之后 ...