一行：

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

word-break: break-all;

两行：

width: 215px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
line-height: 145%;

手动控制最后一行长度和省略号长度：
<style>
        .content{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;/* 这里是超出几行省略 */
    overflow: hidden;
    position: relative;
    line-height: 20px; /*注意高度控制*/
    max-height: 40px;
     width: 500px;
}
 
.content:after{
    content: "......";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 352px;
    padding-left: 4px;
    background: linear-gradient(to right, transparent, #fff 0%);
}
</style>
<body>    
<p class="content">
    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
</p>
</body>

css文本溢出省略号大总结，如你所愿的更多相关文章

  1. css 文本溢出省略号

    单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: ...

  2. css文本溢出省略号

    .ellip{ display: block; width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...

  3. CSS文本溢出处理方式

    1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...

  4. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  5. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

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

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

  7. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  8. CSS ... 文本溢出用省略号代替

    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...

  9. CSS表格溢出省略号代替及其他标签

    box-shadow: 20px 20px 55px #777; // div阴影效果 filter:alpha(opacity=60) //设置透明度为60 opacity:0.6 //非IE浏览器 ...

随机推荐

  1. Jmeter关联详解

    关联的概念 从上一步操作中获取需要的值,传递给下一步操作中进行引用,形成自动关联,而不是 每次操作都去手动修改关联的值.常见的场景有SessionID.Session Token值的获取. 正则表达式 ...

  2. 为什么大家都在用WebRTC？

    WebRTC代表网络实时通信.它是一种非常令人兴奋,强大且具有高度破坏性的尖端技术和标准.自从WebRTC诞生以来,80%的浏览器都开始支持它.有数据显示,2017年~2021年期间,WebRTC市场 ...

  3. 9419页最新一线互联网Android面试题解析大全

    网上高级工程师面试相关文章鱼龙混杂,要么一堆内容,要么内容质量太浅, 鉴于此我整理了如下安卓开发高级工程师面试题以及答案帮助大家顺利进阶,下面进入正题: 一.Android相关 1.Activity ...

  4. 多次面试被拒，‘宅家苦修’30天，终获美团offer（含字节跳动/阿里/腾讯等大厂面试题整理）

    背景:双非渣本. 今年由于疫情,上半年一直在家里.2月份本来无忧无虑,呆在家里不给国家添乱的时候,发现身边的同学找到了大厂的offer.心里开始有点慌张.本来想在3月份如果能回到学校,就开始考研之路, ...

  5. TCP可靠传输

    1. TCP 可靠性如何保证? 信道可靠:用三次握手.四次挥手保证连接正确: 数据正确:分区编号.校验和.超时重传: 传输控制:流量控制.拥塞控制 2. 重传机制 TCP可靠传输方式是序列号与确认应答 ...

  6. Matlab 使用filter求解系统响应

    MATLAB 提供了函数filter,可以实现差分方程的递规求解. 设差分方程的形式为\(a_0y(n) + a_1y(n-1) + \cdots + a_my(n-m)=b_0x(n)+b_1x(n ...

  7. Using Emacs as Clojure IDE

    Open emacs24; Change CWD to parent folder of project home: M-x cd ~/docs/tmp; Build a leiningen proj ...

  8. nat转换技术，且用且珍惜

    一.NAT转换技术 1.1.NAT技术概述 随着Internet的发展和网络应用的增多,IPv4地址枯竭已经成为制约网络发展的瓶颈.尽管IPv6可以从根本上解决IPv4地址空间不足的问题,但目前众多的 ...

  9. awk-01-选项和模式

    awk介绍 awk 是一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及生产报表等等 语法 awk option ' pattern {action} ' file pa ...

  10. centos7.5 安装jdk环境

    最新下载地址 历史下载地址 [root@manage ~]# mkdir /application/ [root@manage ~]# tar -xf jdk-8u112-linux-x64.gz - ...