方式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. jmeter录制app测试脚本

    1.jmeter 下载地址 https://jmeter.apache.org 2.选择下载包 3.下载完成后解压即可使用(也可以配置环境变量,但我一般不配置,可以使用) 4.打开jmeter 创建线 ...

  2. AIO,BIO,NIO,IO复用，同步，异步，阻塞和非阻塞

    (1)什么是NIO(Non-blocked IO),AIO,BIO (2) 区别 (3)select 与 epoll,poll区别 1.什么是socket?什么是I/O操作? 什么是socket? 实 ...

  3. 为什么Web开发人员在2020年不用最新的CSS功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/why-masses-are-not-usi ...

  4. CSS中link和@import的区别

    1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而l ...

  5. 【vue】axios二次封装，更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  6. AndroidStudio 编译失败；Caused by: org.gradle.api.resources.ResourceException: Could not get resource..

    错误信息: Caused by: org.gradle.api.resources.ResourceException: Could not get resource 'https://jcenter ...

  7. Java WebService学习笔记 - Axis(一)

    WebService 简介 实际开发中,很多系统都是基于历史遗留系统进行开发,有时,这些系统基于不同的语言,如C,C++,C#,java,PHP等等.为了实现历史系统的再利用,或向外部程序暴露调用接口 ...

  8. java 基础 流程控制

    鄙人不才,基础不好,趁着闲时简单学习一下,仅作学习分享,如有不正确地方还请各位看客不吝指出. Java流程主要可以分为: 顺序(可以按照正常顺序一步步往下运行的) 选择(三元操作符[?:];if el ...

  9. JSP新闻显示

    MYSQL数据库创建新闻表,用户登陆时使用SERVLET获取用户名,效验通过后直接跳转新闻列表页面,JSP使用EL显示新闻列表 1.首先创建数据库及用户.新闻表 CREATE DATABASE /*! ...

  10. JDK8--04：内置接口

    在JDK8--3中已经说过,使用lambda方法需要新增函数式接口,为了使用方便,JDK8已经提供了许多内置接口,总的归纳来说,有四大函数式接口. /** * * java8 四大内置接口 * * 1 ...