方式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. Redis的String探索之路

    String是redis最基本的类型,键值对(Key : Value 形式),Redis 的 String 可以包含任何数据,最大能存储 512 MB.(一个键最大能存储 512MB) Redis 的 ...

  2. 9、ssh的集成方式2

    1.在第一种的集成方式中,通过struts2-spring-plugin-2.1.8.1.jar这个插件让spring自动产生对应需要的action类,不需要在对应的spring.xml文件中进行配置 ...

  3. HTML&CSS面试高频考点(三)

    11. CSS隐藏元素的方式 /*占据空间,无法点击*/ visibility: hidden; position: relative; top: -999em; /* 不占据空间,无法点击 */ p ...

  4. EDM邮件制作

    EDM营销(Email Direct Marketing)也叫:Email营销.电子邮件营销.是指企业向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售的一种营销手 ...

  5. SpringBoot--swagger搭建、配置及使用

    一. 作用: 1. 接口的文档在线自动生成. 2. 接口测试. 二.模块介绍 Swagger是一组开源项目,其中主要要项目及功能如下: 1.Swagger Codegen: 通过Codegen 可以将 ...

  6. eclipse clone克隆github远程库工程到本地

    项目作者把项目push到github远程库,其他用户可以把项目克隆到本地: eclipse里的操作具体如下: File -> Import... 找到Git 选择 Project from Gi ...

  7. AJAX 调用WebService 、WebApi 增删改查（笔记）

    经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...

  8. 老板急坏了，公司网站的 HTTPS 过期了

    端午出去玩的时候,老板打电话说公司网站的 HTTPS 过期了,访问不了(见下图),要我立马升级一下.可惜我当时没带电脑,无能为力,可把老板急坏了. 没办法,急就先急着,只能等我有电脑了才能搞.点击高级 ...

  9. 对于python 作用域新的理解

    今天看Python习题,看到如下题目 def num(): return [lambda x: i*x for i in range(4)] print([m(2) for m in num()]) ...

  10. CSDN首页

    打开CSDN首页,大部分的内容都是——AI,大数据,Python,很少谈及C#,谈到了也是拿C#做反面对比.博客园的首页没有这种恶意诋毁的言论,什么都有,.net的文章也很多,你发你的大数据和AI,我 ...