首先说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多行显示省略号的更多相关文章

  1. css 多行显示省略号....

    CSS属性如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

  2. css文字两行或者几行显示省略号

    做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...

  3. CSS文字过多显示省略号

    CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...

  4. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  5. css--两行显示省略号兼容火狐浏览器

    css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...

  6. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  7. css超出隐藏显示省略号怎么设置?

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  8. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  9. Android中的TextView实现多行显示省略号

    今天遇到一个问题就是TextView显示内容的时候,多行显示的时候,显示省略号的问题,刚开始没有找到一个好的办法,只找到一个自定义TextView组件的方法,然而今天在贴吧中找到一个更好,更简便的方法 ...

随机推荐

  1. 触发bfd 的条件

    满足下列条件之一就可触发BFC [1]根元素,即HTML元素 [2]float的值不为none [3]overflow的值不为visible [4]display的值为inline-block.tab ...

  2. css3-columns多列布局

    /*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...

  3. js:使用js过程中遇到的一个小问题

    在一个作业中使用了js,函数A调用函数B.当A和B中均含有变量i的时候,相关操作结果可能会出错. 将B中的i替换为j(j不存在于A中)后,结果正确. 目前考虑原因是两个变量i有相关性(或者说实际上就是 ...

  4. MyBatis Like查询处理%_符号

    如果我们数据库中存的字段包含有"%_"这两个like查询的通配符,那么在查询的时候把"%_"当作关键字是查询不出来的,因为mybatis会把这两个字符当作通配符 ...

  5. AnyImgUpload

    @{ ViewBag.Title = "ImgForAny"; Layout = null; } <h2>ImgForAny</h2> <script ...

  6. mybatis如何做分页处理

    1.首先根据自己实际需求编写实体类 import java.io.Serializable; public class User implements Serializable{ //最好将该实体类序 ...

  7. Java_File类讲解_打印目录树状结构_递归算法

    package cn.xiaocangtian.testFile; import java.io.File; public class FileTree { public static void ma ...

  8. html+css上传文件控件美化

    html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. mysql5.6 忘记root密码

    1.首先net stop mysql服务,并且切换到任务管理器,有与mysql有关的,最好关闭进程. 2.运行CMD命令切换到MySql安装bin目录,下面是我的mysql安装目录 cd  D:\Pr ...

  10. Mysql中eft join、right join、inner join的区别

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...