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 ...
随机推荐
- AngularJS 计时器
<div ng-controller="MyController"> <!--显示$scope.clock的now属性--> <h1>hello ...
- XF警告试图
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- WPF 使用字体引发的 CLR20r3 问题排查
开发机器上运行完好,拷贝置目标机器上出现此问题 问题排查: 计算机-->管理-->事件查看器--->windows日志-->应用程序 Application Error 看不 ...
- MVC基架生成的Detele视图
@model MyMusicStore.Models.Album @{ ViewBag.Title = "Delete"; } <h2>Delete</h ...
- jquery动态创建小广告
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 将exe和dll文件打包成单一的启动文件
当我们用 VS 或其它编程工具生成了可执行exe要运行它必须要保证其目录下有一大堆dll库文件,看起来很不爽,用专业的安装程序生成软件又显得繁琐,下面这个方法教你如何快速把exe文件和dll文件打包成 ...
- 数字证书原理 good
文中首先解释了加密解密的一些基础知识和概念,然后通过一个加密通信过程的例子说明了加密算法的作用,以及数字证书的出现所起的作用.接着对数字证书做一个详细的解释,并讨论一下windows中数字证书的管理, ...
- WPF开发之限制输入的控件---------转自CDSN
原文地址 http://blog.csdn.net/ghosind/article/details/51627601 作者 ghosind 一,正则表达式过滤字符串 if (RegexString = ...
- Python标准库(3.x): 内建函数扫盲
Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() divmod ...
- Win10《芒果TV》商店版更新v3.2.2:新增对Win10产品专用会员兑换码支持,全新的最具价值用户纪念奖励
在WinHEC2016宣布Win10和ARM历史性结合之际,<芒果TV>UWP版迅速更新v3.2.2版,主要是新增对Win10产品专用会员兑换码支持,推出全新的最具价值用户纪念奖励(具有唯 ...