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

单行

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. web font

    gfx.downloadable_fonts.enabled

  2. Linux 学习 (一) Linux简介

    Linux达人养成计划 I 学习笔记 Linux 内核官网:www.kernel.org 内核版本说明:主版本.次版本.末版本,如2.6.18 Linux 主要发行版本 RedHat: 服务器领域,部 ...

  3. BZOJ 1443 游戏(二分图博弈)

    新知识get. 一类博弈问题,基于以下条件: 1.博弈者人数为两人,双方轮流进行决策.2.博弈状态(对应点)可分为两类(状态空间可分为两个集合),对应二分图两边(X集和Y集).任意合法的决策(对应边) ...

  4. Nginx 滑动窗口与缓冲区

    L:125

  5. python 模块之-shelve

    shelve模块比pickle模块简单,只有一个open函数,返回类似字典的对象,可读可写;key必须为字符串,而值可以是python所支持的数据类型 import shelve f = shelve ...

  6. linux缺失gcc的安装方法

    linux安装gcc操作 1.查看linux是否有gcc文件 这个是没有挂载的 2. 使用df,查看系统光盘的挂载位置 3.卸载分区 umount /dev/sr0 4.将redhat系统光盘重新载入 ...

  7. Codeforces Round #514 (Div. 2) C. Sequence Transformation 思维构造

    题意 给出一个1-n的集合   gcd 集合里面的所有数  得到的 一个 数   然后自己选择删去一个数   要使得到的数 构成的数列 的字典序最大 思路: gcd所有数 那gcd得到的数肯定要小于数 ...

  8. 吉哥系列故事――恨7不成妻 HDU - 4507 数位dp

    思路  和普通的DP不一样的是 这里求的是满足条件的数的平方的和 而数位DP只跟数每位是什么密切相关  所以要开一个结构 (多加一个 数的和sum 和平方和qsum)存一下各个状态的和的情况 dp[p ...

  9. python中的replace()方法的使用

    python中的replace()方法的使用 需求是这样的:需要将字符串的某些字符替换成其他字符 str.replace(old,new,max) 第一个参数是要进行更换的旧字符,第二个参数是新的子串 ...

  10. Java 类设计技巧

    摘自<Java核心技术>卷I:基础知识 p140 第4章对象与类 - 类设计技巧 1)一定将数据设计为私有. 最重要的是:绝对不要破坏封装性.有时候,需要编写一个访问器方法或更改器方法,但 ...