方式1：这种方式就是必须要跟width搭配使用，当你使用的display:flex; 的时候可能会影响样式

width: 200px;

overflow: hidden; /*超出部分隐藏*/

text-overflow: ellipsis; /* 超出部分显示省略号 */

white-space: nowrap; /*规定段落中的文本不进行换行 */

方式2：

display : -webkit-box;

overflow: hidden;

-webkit-box-orient: vertical;

-webkit-line-clamp: 1; /*这里设置第几行显示省略号，可以设置第一行或者其他行*/

方式3：未完待续吧

CSS文本溢出，显示省略号（...）的更多相关文章

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

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

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

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

  3. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  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文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  8. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  9. 文本溢出显示省略号，CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  10. css实现文本溢出显示省略号

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

随机推荐

  1. Dubbo——服务调用过程

    文章目录 引言 服务的交互 服务降级 集群容错 服务调用 服务端接收请求 总结 引言 经过之前文章的铺垫,现在可以来分析服务的交互调用过程了. 服务的交互 服务降级 从名字上看我们不难理解MockCl ...

  2. [实战] Flutter 上的内存泄漏监控

    一.前言 Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏. 在 Android 平台上有个内存泄漏检测工具 LeakCanary, 它可以方便地在 debug ...

  3. equals与hashCode的区别

    equals与hashCode的区别 1.类中的equals方法是一定要重写/覆盖(Override)的,因为要让它按照设计的需求来根据特征值判断等价性. 这里的特征值,就是String类型的name ...

  4. DataOutputStream是用来处理什么类型数据的

    FileOutputStream f=new FileOutputStream(new File("sa.txt")); DataOutputStream do=new DataO ...

  5. 利用synchronized解析死锁的一种形成方式

    代码 import ... public class Test{ private static Object o1=new Object(); private static Object o2=new ...

  6. Linux远程连接mongodb

    当没有客户端工具,eg:robo3T时,如何修改mongodb里的数据呢? 1.连接mongodb服务器mongo 1.1.1.1:1688 2.查看数据库列表show dbs 3.选择使用log库u ...

  7. 05[掌握]高可用、集群、持久化、docker 等前置知识点

    高可用 24小时对外提供服务 高并发 同一时间段能处理的请求数 1,中心化和去中心化 1.1,中心化 意思是所有的节点都要有一个主节点 缺点:中心挂了,服务就挂了 中心处理数据的能力有限,不能把节点性 ...

  8. SQL注入入门

    这几天做了不少SQL注入题,对SQL注入有点体会,所以写写自己的学习历程与体会. 什么是SQL注入 SQL注入就是指web程序对用户输入的数据的合法性没有进行判断,由前端传入的参数带着攻击者控制的非法 ...

  9. Redis高级特性

    redis的事务(transaction) 转载:https://blog.csdn.net/fmwind/article/details/78065236 redis中的事务是一组命令的集合.事务同 ...

  10. 打造属于你的聊天室（WebSocket）

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...