一行：

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. centos ansible常用命令

    ansible在日常运维中经常使用,特别是批量执行多台服务器的时候,有效减小重复的操作成本,以下从安装到使用仅讲解工作中常用的几种方式,模块很多功能很强大,但不做全面讨论. ansible安装 在ce ...

  2. 必备！一文掌握Wordpress插件

    必备!一文掌握Wordpress插件 什么是插件? Wordpress是一个非常强大的建站系统,而在我们建站的过程中,插件的使用必不可少. 插件是WordPress功能的扩展,也是WordPress得 ...

  3. Netty入门（三）：EventLoop

    前言 Netty系列索引: 1.Netty入门(一):ByteBuf 2.Netty入门(二):Channel IO相关: 1.Java基础(一):I/O多路复用模型及Linux中的应用 上文提到,早 ...

  4. Java面向对象03——类与对象的创建

    类的创建与初始化对象 age: 以类的方式组织代码,以对象的组织(封装)数据  package oop.demon01.demon02; ​ // 学生类(抽象模板) public class Stu ...

  5. 谈谈网络协议 - 数据链路层（ Data Link）

    数据链路层( Data Link) 链路:从1个节点到相邻节点的一段物理线路(有线或无线),中间没有其他交换节点 案例 上图可以看出,总共由5条链路组成: 第1条:计算机0 => 路由器0,使用 ...

  6. MVVM窗体show的弹窗事件

    RestMatCutWin restMatCutWindow;//定义一个窗体的全局变量 private void RestMatCutWinExecute() { if (restMatCutWin ...

  7. comm tools

    RTL:寄存器传输级别 LRM:语言参考手册 FSM:有限状态机 EDIF:电子数据交换格式 LSO:库搜索目录 XCF:XST 约束条件 1. par -ol. high  命令总是 '-'开头,参 ...

  8. 【编程语言】Matlab 学习记录

    title: Matlab Learning Record date: 2020-05-23 20:11:26 author: liudongdong1 img: https://gitee.com/ ...

  9. 【springboot】知识点总结

    [springboot 基础编] 01.SpringBoot>01 - 第一个应用–HelloWorld 02.SpringBoot>02 - 整合 MyBatis 03.SpringBo ...

  10. Qt多窗口编程详解

    常用的窗体基类是 QWidget.QDialog 和 QMainWindow,在创建 GUI 应用程序时选择窗体基类就是从这 3 个类中选择. QWidget 直接继承于 QObject,是 QDia ...