一行：

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. 【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)

    通过Azure App Service门户,启用Health Check来监视应用服务的实例,当发现其中一个实例处于不健康(unhealthy)状态时,通过重新路由(即把有问题的实例从负载均衡器中移除 ...

  2. 自行搭建网站和APP统计平台

    做过网站运营分析的朋友,一定知道 Google 统计.友盟统计以及百度统计,它们都是非常优秀的统计平台. 但不管怎么样,数据并没有掌握在网站拥有者的手中.有时候,某些业务场景不适合使用第三方统计平台, ...

  3. 缩减Azure上Linux虚拟机系统盘容量

    [话在前头] 这么些年微软 Azure 创建虚拟机一直不能修改系统盘大小,但很多时候实际又用不了这么大的操作系统磁盘.微软自己甚至还针对 Windows 服务器镜像推出一个 smalldisk 的镜像 ...

  4. Python3中的字符串相关操作

    Python3的字符串操作相关函数详解 字符串内建函数 1. capitalize() 将字符串中的第一个字符转换成大写,其他字母变成小写.例: >>> "hello Wo ...

  5. Build a Beautiful oh-my-zsh Themes

    Selection Criteria double line; provide username, hostname, current directory; provide information o ...

  6. python3+telnetlib实现简单自动测试

    1 telnetlib介绍 1.1 简介 官方介绍文档:telnetlib -- Telnet 客户端 - Python 3.9.6 文档 telnetlib 模块提供一个实现Telnet协议的类 T ...

  7. SpringBoot开发二

    需求介绍-Spring入门 主要是理解IOC,理解容器和Bean 代码 在Test里面利用getBean方法帮助我们看一下容器的创建: 那我首先要写一个Bean对象,假设是写一个访问数据库类. Alp ...

  8. Python - typing 模块 —— Any Type

    前言 typing 是在 python 3.5 才有的模块 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...

  9. STM32—TIMx实现编码器四倍频

    文章目录 一.储备知识 二.TIMx的编码器模式介绍 1.计数边沿设置 2.选择极性和使能 3.使能 4.计数方向 三.代码部分 一.储备知识 通过STM32的定时器编码器接口模式对编码器进行四倍频, ...

  10. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...