1.普通单行截断省略

overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容)
text-overflow:ellipsis;(设置文字在一行显示,不能换行)
white-space:no-wrap;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

这个方法的优点:

无兼容问题

响应式截断

文本溢出范围才显示省略号,否则不显示省略号

省略号位置显示刚好

缺点:

只支持单行文本截断

2.多行截断省略

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行)
display: -webkit-box;
-webkit-box-orient: vertica;
overflow: hidden;
text-overflow: ellipsis;

这个方法的兼容性一般

出处链接:https://www.jianshu.com/p/5a0943faf7aa

 
溢出插件:
  • clamp.js
  • jQuery.dotdotdot
 

css文本溢出解决方案的更多相关文章

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

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

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

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

  3. css文本溢出隐藏显示省略号(单行+多行)

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

  4. CSS文本溢出处理方式

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

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

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

  6. css 文本溢出

    多行文本溢出处理: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 3 行 overflow ...

  7. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  8. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  9. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Clickhouse - MergeTree原理

    Clickhouse - MergeTree原理 MergeTree引擎以及隶属于MergeTree引擎族的所有引擎是Clickhouse表引擎中最重要, 最强大的引擎. MergeTree引擎族中的 ...

  2. 重点收藏!BI数据分析工具哪家强?

    信息爆炸时代,大数据晋升为一个时髦词汇.不论是在哪个行业领域,大数据分析成为各企业备受推崇的决策工具.对于海量数据的挖掘,有助于统计事情发生的概率,帮助人们计算做某些事情成功的几率.企业正在数据的海洋 ...

  3. 太骚了,用Excel玩机器学习

    最近发现了一个好玩的Python库,它可以将训练好的机器学习模型转换为Java.C.JavaScript.Go.Ruby,VBA 本地代码,可以让连Python和机器学习一无所知的同学也能感受预测的神 ...

  4. 基于IEC61499标准的组件

    IEC 61499标准通常用于开发分布式控制系统.IEC 61499定义了功能模块(FB, function block)的模型.有三种FB,分别是Basic FB (BFB),Service Int ...

  5. kibana操作记录

    GET _search { "query": { "match_all": {} } } GET _cat/nodes GET _cat/health GET ...

  6. C#的泛型和Java的伪泛型

    C#的泛型和java的伪泛型,talk is cheap,show me the code   C#泛型 下面结果,C#里面会输出false,如果这个还不能真正的说明C#的泛型是真的泛型,那就看下面这 ...

  7. 什么是句柄C#

    话不多说,下面分享下我对句柄的看法. 如果没有意外的话,ABCDE他们将依次进行占用CPU资源.但是可能会发生如下情况 句柄,就是用来维护进程或者系统范围内的一个标识.就比如我们去访问一个文件的时候, ...

  8. idea教程--使用maven创建web项目

    1.单击create new project 2.运行maven项目 在pom.xml文件中添加tomcat插件然后如下图运行;

  9. DeepFaceLab:NVML Shared Library Not Found 解决办法

    解决办法如下 A.出现这个提示的原因是安装后的Nvidia显卡目录C:\Program Files\NVIDIA Corporation\NVSMI不存在,造成的. B.搜索文件Nvidia-SMI. ...

  10. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html