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. Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用

    原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...

  2. MyBatis的Mapper代理笔记

    MaBatis--Mapper代理 目前使用SqlSession进行增删改查的缺点: 没有办法实现多参传值 书写的时候没有接口,后期的维护低 使用Mapper的动态代理方式来解决问题 具体实现 首先我 ...

  3. docker的网络基础

    docker使用的与Linux网络有关的主要技术: Network Namespace Veth 设备对 Iptables/Netfilter 网桥 路由 <1> 网络命令空间 names ...

  4. python库--tensorflow--数学函数

    官方API(需FQ) 中文API 方法 返回值类型 参数 说明 算数运算符 .add() Tensor x, y, name=N 加法(若x,y都为tensor, 数据类型需一致, 以下所有x,y都如 ...

  5. RocketMQ详解(二)安装使用详解

    专题目录 RocketMQ详解(一)原理概览 RocketMQ详解(二)安装使用详解 RocketMQ详解(三)启动运行原理 RocketMQ详解(四)核心设计原理 RocketMQ详解(五)总结提高 ...

  6. java.lang.NullPointerException: Attempt to invoke virtual method 'int com.example.xxx.Json.NewsBean.getError_code()' on a null object reference错误解决

    AS在运行的过程中出现了错误: java.lang.NullPointerException: Attempt to invoke virtual method 'int com.example.xx ...

  7. Android学习记录(三)——安装SQLite

    这次学习安装SQLite. 一.SQLite简介 重要特性:零配置,即不需要复杂的配置即可使用 详细:https://www.runoob.com/sqlite/sqlite-intro.html 二 ...

  8. # Zombie Gunship Survival(僵尸炮艇生存)GG修改器修改教程

    Zombie Gunship Survival(僵尸炮艇生存)GG修改器修改教程 1.修改伤害,打击范围,武器冷却时间,子弹容量 测试手机机型:华为畅享7 系统版本:Android7.0 是否ROOT ...

  9. PHP中的PDO操作学习(二)预处理语句及事务

    今天这篇文章,我们来简单的学习一下 PDO 中的预处理语句以及事务的使用,它们都是在 PDO 对象下的操作,而且并不复杂,简单的应用都能很容易地实现.只不过大部分情况下,大家都在使用框架,手写的机会非 ...

  10. 关于当前PHP脚本运行时系统信息相关函数

    我们的 PHP 在执行的时候,其实可以获取到非常多的当前系统相关的信息.就像很多开源的 CMS 一般会在安装的时候来检测一些环境信息一样,这些信息都是可以方便地动态获取的. 脚本文件运行时的系统用户相 ...