首先说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. 《jQuery知识点总结》(二)

    dom css 操作html(n)                n为空则取值相当于JS的innerHTML填写n为赋值val(n)                n为空则取值相当于JS的value填 ...

  2. Xcode 属性面板添加自定义控件属性

    让自定义控件像原生控件一样可以在属性面板配置参数,Apple文档传送 直接上效果图,根据

  3. Docker - command in docker container

    1.查看Container 里面运行的进程 在运行容器以后,可以查看里面的进程: docker top <container_id> or <container_name> 2 ...

  4. 最短路(Floyd)

    关于最短的先记下了 Floyd算法: 1.比较精简准确的关于Floyd思想的表达:从任意节点A到任意节点B的最短路径不外乎2种可能,1是直接从A到B,2是从A经过若干个节点X到B.所以,我们假设maz ...

  5. 已知当前地理位置经纬度查询几个点中最近的一个地点demo

    1.首先定义一个点与点之间测算距离的方法 2.然后定义找出基本点和集合中最近的一个点的方法 3.取第一条数据即是最近的点的坐标 public class Location { public int i ...

  6. linux的安装

    在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...

  7. IDEA构建一个mybatis项目

    目录结构如下: 在pom.xml中配置需要的jar包 <dependencies> <dependency> <groupId>org.mybatis</gr ...

  8. webuploader在IE8/9下上传遇到的两个问题

    最近在做图片上传功能. 点击一个按钮,弹出一个iframe,它是百度的webuploader插件 在点击关闭按钮时,IE9下总是会报错: __flash__removeCallback未定义错误 解决 ...

  9. Linux的简单介绍和常用命令的介绍

    Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...

  10. 设置NotePad++设置"不打开上次关闭的文件"

    notepad++是一个很好的记事本工具,但是默认会记录上次打开时未关闭的文件,但是实际上用起来并不方便, 可以按照下面的方式去除,notepad++版本:v6.6.2,os:win7 64位 按照以 ...