css 文本超出n行就隐藏并且显示省略号
首先,要知道css的三条属性。
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
这三个是css的基础属性,需要记得。
但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?
CSS3解决了这个问题,解决方法如下:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:n; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
最后的css样式如下:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:n;
css 文本超出n行就隐藏并且显示省略号的更多相关文章
- CSS文本超出2行就隐藏并且显示省略号
今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...
- css文本超出2行就隐藏并显示省略号
之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...
- css 文本超出2行就隐藏并且显示省略号
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...
- CSS文本超出指定行数省略显示
单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...
- 微信小程序文字超过行后隐藏并且显示省略号
在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- 关于H5 移动端css 文本超出时省略号 失效的问题
之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...
- 转css中文英文换行、禁止换行、显示省略号
css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01 word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...
随机推荐
- spring、springmvc、springboot、springcloud
Spring 最初利用“工厂模式”( DI )和“代理模式”( AOP )解耦应用组件.大家觉得挺好用,于是按照这种模式搞了一个 MVC 框架(一些用 Spring 解耦的组件),用开发 web 应用 ...
- python之requests 乱七八糟
1.预配置 import requests ss = requests.Session() ss.headers.update({'user-agent':'Mozilla/5.0 (Windows ...
- C# 之 比较两个word文档的内容
利用 Microsoft.Office.Interop.Word 组件进行比较.引入命名空间:using Word2013 = Microsoft.Office.Interop.Word; 代码如下: ...
- net core体系-web应用程序-4net core2.0大白话带你入门-2asp.net core新建项目
新建asp.net core项目 开发环境:Windows Server R2 2008 开发工具:Microsoft Visual Studio 2017 新建asp.net core项目 创建 ...
- linux运行python程序
linux下有多种方式运行python: 1. 命令行执行: 建立一个*.py文档,在其中书写python代码.之后,在命令行执行: $ python *.py 注意事项:1. 需要指明文件的 ...
- Selenium自动化测试框架的搭建
说 起自动化测试,我想大家都会有个疑问,要不要做自动化测试? 自动化测试给我们带来的收益是否会超出在建设时所投入的成本,这个嘛别说是我,即便是高手也很难回答,自动化测试的初衷是美好的,而测 ...
- div 内容自动换行
如图: 1.自动换行 <div style="widht:100%;height:100%;word-wrap: break-word">111111111111111 ...
- 非对称加密算法-RSA算法
一.概述 1.RSA是基于大数因子分解难题.目前各种主流计算机语言都支持RSA算法的实现 2.java6支持RSA算法 3.RSA算法可以用于数据加密和数字签名 4.RSA算法相对于DES/AES等对 ...
- fastadmin默认的controller已实现的方法
fastadmin控制器 <?php namespace app\admin\controller\peizi; use app\common\controller\Backend; /** * ...
- SPOJ RPLN (模板题)(ST算法)【RMQ】
<题目链接> 题目大意:给你一段序列,进行q次区间查询,每次都输出询问区间内的最小值. 解题分析: RMQ模板题,下面用在线算法——ST算法求解.不懂ST算法的可以看这篇博客 >& ...