终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号

/* 文本单行超出省略号 */
.textels {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 1; //超出3行隐藏,并显示省略号
}
/* 文本2行超出省略号 */
.textels-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 2; //超出3行隐藏,并显示省略号
}
/* 文本3行超出省略号 */
.textels-3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 3; //超出3行隐藏,并显示省略号
}
想显示多少行超出的用省略号表示就更改-webkit-line-clamp为几。
已经用了n次了,肯定可以的,所以就不上图了哈!
下一篇就说说怎么用js控制显示几个字,超出就用省略表示。

css文本超出省略号的更多相关文章

  1. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  2. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  3. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  4. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

  5. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  6. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

  7. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  8. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  9. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

随机推荐

  1. django中图片的上传和显示

    上传图片实际上是 把图片存在服务器的硬盘中,将图片存储的路径存在数据库中. 1 首先要配置文件上传的路径: 1.1 建立静态文件目录 在项目根目录下 新建一个 static文件夹,下面再建立一个med ...

  2. mysql中的函数与存储过程

    mysql中的函数:1 mysql下创建函数: 1.1 语法: delimiter $$ -- 设置分隔符,默认是; 设置成其他符号,让编译器知道我们函数编写的结束,此处设置成$$ create fu ...

  3. jedis配置

    public interface IJedisClientFactory { Jedis getJedis(); } JedisClientFactoryImpl.java @Service publ ...

  4. type="file"实现兼容IE8本地选择图片预览

    一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...

  5. hdu-1082 Matrix Chain Multiplication---栈的运用

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1082 题目大意: 题意大致是N个矩阵,如果要求计算的矩阵例如(AB),如果A的列等于B的行,进行:A ...

  6. Ubuntu+apt-get update时的源

    源是通过 /etc/apt/sources.list # file /etc/apt/sources.list.d # dir 来确定的, 只要将其中的相应文件/相应行删除了, 在apt-get up ...

  7. html5之img标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ALS音乐推荐(上)

    本篇文章的开头笔者提出一个疑问,何为数据科学,数据科学是做什么的?大家带着这个疑问去读接下来的这篇音乐推荐的公众号. 从经验上讲,推荐引擎属于大规模机器学习,在日常购物中大家或许深有体会,比如:你在淘 ...

  9. 【转】JAVA异常报错大全

    算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:NegativeAr ...

  10. 使用控制台调试WinForm窗体程序

    .程序代码结构 .Win32DebuggerHelper.cs using System.Runtime.InteropServices; /* TODO:使用方法 Win32.AllocConsol ...