css多行显示省略号
首先说css多行显示省略号和单行文本省略号:
我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowrap;再然后,溢出内容为隐藏,overflow:hidden;第四步:溢出文本显示省略号,即text-overflow:ellipsis;完成这四步即可实现单行文本省略号。
多行文本省略号:代码如下
display: -webkit-box;
-webkit-box-orient:vertical;
text-overflow: ellipsis;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//表明是2行文本显示省略号,换成3则表明是3行文本显示省略号
-webkit-box-orient: vertical;
css多行显示省略号的更多相关文章
- css 多行显示省略号....
CSS属性如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
- css文字两行或者几行显示省略号
做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...
- CSS文字过多显示省略号
CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- css--两行显示省略号兼容火狐浏览器
css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- css超出隐藏显示省略号怎么设置?
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- Android中的TextView实现多行显示省略号
今天遇到一个问题就是TextView显示内容的时候,多行显示的时候,显示省略号的问题,刚开始没有找到一个好的办法,只找到一个自定义TextView组件的方法,然而今天在贴吧中找到一个更好,更简便的方法 ...
随机推荐
- 触发bfd 的条件
满足下列条件之一就可触发BFC [1]根元素,即HTML元素 [2]float的值不为none [3]overflow的值不为visible [4]display的值为inline-block.tab ...
- css3-columns多列布局
/*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...
- js:使用js过程中遇到的一个小问题
在一个作业中使用了js,函数A调用函数B.当A和B中均含有变量i的时候,相关操作结果可能会出错. 将B中的i替换为j(j不存在于A中)后,结果正确. 目前考虑原因是两个变量i有相关性(或者说实际上就是 ...
- MyBatis Like查询处理%_符号
如果我们数据库中存的字段包含有"%_"这两个like查询的通配符,那么在查询的时候把"%_"当作关键字是查询不出来的,因为mybatis会把这两个字符当作通配符 ...
- AnyImgUpload
@{ ViewBag.Title = "ImgForAny"; Layout = null; } <h2>ImgForAny</h2> <script ...
- mybatis如何做分页处理
1.首先根据自己实际需求编写实体类 import java.io.Serializable; public class User implements Serializable{ //最好将该实体类序 ...
- Java_File类讲解_打印目录树状结构_递归算法
package cn.xiaocangtian.testFile; import java.io.File; public class FileTree { public static void ma ...
- html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- mysql5.6 忘记root密码
1.首先net stop mysql服务,并且切换到任务管理器,有与mysql有关的,最好关闭进程. 2.运行CMD命令切换到MySql安装bin目录,下面是我的mysql安装目录 cd D:\Pr ...
- Mysql中eft join、right join、inner join的区别
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...