首先说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. Docker - Install docker on CentOS

    1. 准备 由于 Dokcer 需要 64bit OS, 版本号 3.10 或者更新的版本.所以,需要我们先确认我们的 CentOS 系统 $ uname -r output :: 3.10.0-22 ...

  2. nginx优化

    此文章非原创,出自鸟哥之手~ http://blog.chinaunix.net/uid-25266990-id-2985541.html 改排版改得多,当然红色部分要注意下,用得较多 ------- ...

  3. STM32F412应用开发笔记之二:基本GPIO控制

    NUCLEO-F412ZG板子上的元器件并没有完全焊接,除去ST-LINK部分和电源部分后,还有用一个USB主机接口,三个LED灯和两个按钮,不过很多功能引脚都已经引到了插针.查看原理图可发现,由原理 ...

  4. tp框架实现验证码

    今天来看一个小插件. tp框架是怎么实现验证码的. 又到了我们千篇一律的时候了,首先呢,先做一个用来显示的html界面名为:zhuce.html <!DOCTYPE html PUBLIC &q ...

  5. jquery遍历不同色彩的li

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/

        https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/ ...

  7. 鱼搜_鱼搜官网_鱼搜搜索_http://www.7yusou.com

    收集了N多视频小站,然后花了3天时间弄了一个鱼搜搜索网站.欢迎大家访问哟. http://www.7yusou.com

  8. Python 学习笔记(6)--常用模块(2)

    一.下载安装 下载安装有两种方式: yum\pip\apt-get 或者源码 下载源码 解压源码 进入目录 编译源码 python setup.py build 安装源码 python setup.p ...

  9. Linux 使用Crontab设置定时调用Shell文件

    定时执行步骤: 利用crontab来定时执行任务大致有如下两步: 1.编写shell脚本 2.利用crontab加入到定时任务队列 一.如何建立shell脚本 程序必须以下面的行开始(必须方在文件的第 ...

  10. 【leetcode】ZigZag Conversion

    题目简述 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows ...