多行文本的溢出显示省略号(移动端)

一.单行文本的溢出显示省略号(通用)

.mui-ellipsis
{
overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-space: nowrap; /*如何处理元素内的空白符。nowrap表示文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
}

二.多行文本的溢出显示省略号(移动端)

-webkit-line-clamp 是一个 不规范的属性,它没有出现在 CSS 规范草案中。-webkit-line-clamp限制在一个块元素显示的文本的行数。

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

.mui-ellipsis-2
{
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
overflow: hidden; white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word; -webkit-line-clamp:; /*限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
}

css 多行文本的溢出显示省略号(移动端)的更多相关文章

  1. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  2. css实现单行,多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  3. CSS实现单行、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  4. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  6. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  7. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  9. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

随机推荐

  1. Sublime Text3 配置 NodeJs 开发环境

    题外话:使用visual studio开发NodeJs也是很方便,只需要安装插件即可. 本着对Sublime Text3的喜爱,尤其是最近更新后,界面和功能上感觉更nice了,那就配置一发环境吧! ( ...

  2. StringTokenizer

    StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数. 1.构造函数 public StringTokenizer(String str) public Str ...

  3. Mysql如何快速插入100万条记录?

    1.java程序拼接insert带多个value,使一次提交多个值. 2.插入数据之前先删除索引(注意主键不能删除),然后插入数据,最后重建索引 3.可以设置手动commit,用来提高效率 4.使用批 ...

  4. 对C#调用C++的dll的一点思考

    最近在对接C++程序的时候碰到了一些问题,然后花了一段时间才解决,今天就这些小问题来做一个总结,很多时候由于对另外一种开发语言的不熟悉,会在使用的过程中遇到很多的问题,这些问题看似简单但是背后却有很多 ...

  5. log4j2.xml

    <?xml version="1.0" encoding="UTF-8"?> <configuration status="info ...

  6. git ignore 忽略 idea文件

    下载了项目组的代码之后发现,一个问题,一编译就生成了很多的 .idea文件夹 还有 target文件夹,这些是不需要提交到git上的, 需要提交的时候屏蔽一下,所以需要建立一个ignore文件列表把他 ...

  7. loadrunner 事务、同步点和思考时间

    事务 在LoadRunner里,我们定义事务主要是为了度量服务器的性能.每个事务度量服务器响应指定的Vuser请求所有的时间,这些请求可以是简单任务,也可以是复杂任务. 要度量事务,需要插入Vuser ...

  8. 五、同一台MySQL服务器启动多个端口-为读写分离做准备

    一.安装数据库 https://www.cnblogs.com/huiyi0521/p/10113280.html 二.使用 mysql 命令为 root 用户授权 mysql 远程连接服务 mysq ...

  9. spring boot和swagger 整合

    本文来源:https://blog.csdn.net/saytime/article/details/74937664 一.依赖 <dependency> <groupId>i ...

  10. name设置id的方式 解决多个单选域冲突现象 同时有利于从动态网页取值