1.单行文本溢出显示省略号
单行文本溢出显示省略号,必须满足三个条件:
(1)先强制一行内显示文本
white-space:nowrap;(默认 normal自动换行)
(2)超出的部分隐藏
overflow:hidden;
(3)文字用省略号代替超出的部分
text-overflow:ellipsis;

例如:

效果如下:

2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit浏览器或者移动端(移动端大多是webkit内核)
语法:
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;

例如:

效果如下:

css如何简单设置文字溢出盒子显示省略号的更多相关文章

  1. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. css设置文字多余部分显示省略号

    如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...

  3. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  4. CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

    4要素: width: 125px;  //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...

  5. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

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

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  7. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  8. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  9. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

随机推荐

  1. Android Parsing between JSON and Kotlin Object with Google Gson Library

    Parsing between JSON and Kotlin Object with Google Gson Library dependencies { ... implementation 'c ...

  2. vue 手机号码隐藏中间

    template {{ phone | mobileFilter }}   data export default { filters:{         mobileFilter(val){     ...

  3. Kafka内外网访问

    本文介绍了Kafka内外网访问的设置. kafka的两个配置listeners和advertised.listeners listeners kafka监听的网卡的ip,假设你机器上有两张网卡,内网1 ...

  4. 20201219 u,v,w

    开考前刚起床,所以一边考一边吃饭,然后整场都很迷... A. u 考场 半天才搞懂"下三角区域"指哪个区域,手模样例确认后打了 \(O(qn^2)\) 的裸暴力,然后就不会做了. ...

  5. Tars | 第5篇 基于TarsGo Subset路由规则的Java JDK实现方式(上)

    目录 前言 1. 修改.tars协议文件 1.1 Go语言修改部分 1.2 修改地方的逻辑 1.3 通过协议文件自动生成代码 2. [核心]增添Subset核心功能 2.1 Go语言修改部分 2.2 ...

  6. linux网络编程(一)

    ============================================================== 第一天:基本概念.TCP.FTP: =================== ...

  7. C# Dapper基本三层架构使用 (三、BLL)

    BLL层介绍 业务逻辑层用于做一些有效性验证的工作,以更好的保证程序运行的健壮性.如完成数据添加.修改和查询业务等:不允许指定的文本框中输入空字符串,数据格式是否正确以及数据类型验证:用户权限的合法性 ...

  8. k8s核心资源之Pod概念&入门使用讲解(三)

    目录 1. k8s核心资源之Pod 1.1 什么是Pod? 1.2 Pod如何管理多个容器? 1.3 Pod网络 1.4 Pod存储 1.5 Pod工作方式 1.5.1 自主式Pod 1.5.2 控制 ...

  9. python模块--pathlib

    类/属性/方法 返回值 参数 说明 .Path() p 创建Path对象 path 路径         p.parent Path 返回上一级路径 p.parents iter 上一级路径, 上上级 ...

  10. CentOS8部署nextcloud网盘

    Nextcloud是一款开源的存储软件,功能丰富,支持多人协同工作,目前完全免费. 官网:https://www.nextcloud.com 架构:LAMP或LNMP 本文以LAMP为基础 注意:ph ...