css实现超出文本溢出用省略号代替
一、单行
实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果。
如下:
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果:

二、多行
不考虑兼容性,适用于Webkit浏览器内核
css代码:
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-clamp:3 //截取第三行
overflow:hidden;
效果:

css实现超出文本溢出用省略号代替的更多相关文章
- CSS实现单行文本溢出显示省略号
p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- css实现超出一行后用省略号显示
css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
随机推荐
- <PC>HP网络共享并创建一个热点问题
郁闷了一年多 你不能使用本地连接的开放热点 网上说的网卡驱动程序,系统设置等.,我们解决不了 原本BIOS节能设置错误 导致在连续主动对自己的有线无线功能被禁用 该LAN\WLAN Switchin ...
- 多线程——继承Thread类别
详细java此前使用多线程,让我们来看看下面的问题. 什么是多线程 简单的理解成:cpu"同一时候"运行多个任务,这就是多线程. (究其本质,当涉及到进程和线程的概念.上面 ...
- hibernate关于一对一注解配置
注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法.局部变量.方法参数等的前面,用来 ...
- Eucalyptus企业云计算(建立能够和Amazon EC2兼容的云)
Eucalyptus是与一个在加利福尼亚大学的研究性项目,创建了一个使企业能够使用它们内部IT资源(包括服务器.存储系统.网络设备)的开源界面,来建立能够和Amazon EC2兼容的云. “Eucal ...
- NetCore 上传,断点续传,可支持流上传
之前公司要做一个断点续传的业务,找了许多都没有找到合适的,都是残次不全的,终于让我遇到一个基于百度的 webuploader 的断点续传.原作者: 断点续传(上传)( https://www.some ...
- 零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作 ...
- BooleanToColorConverter
public class BooleanToColorConverter : IValueConverter { public object Convert(object value, Type ta ...
- SignalR---服务端
原文:SignalR---服务端 前段时间把SignalR的官网教程大致看了一下,算是翻译了一遍,加上了自己的个人理解, 一下上传三个文件,分别是服务端.web客户端.DOTNET客户端相关文档,供大 ...
- Oracle 存储过程创建及调用
--------创建存储过程------- create or replace procedure TestSPas begin update table_name set CREATE_TIMEST ...
- oracle 使用db_link 导入导出小结
客户有一个需求,是将一个库中的某个用户迁移到一台新的oracle服务器上,因数据量较小,并且不涉及版本的升级,所以可以采用创建一个dblink,然后通过这个dblink直接从源库将用户数据导出并导入到 ...