css实现超出部分用...代替

时间：2023-02-16 14:58:21

如果是一行的话

css为

white-space: nowrap； 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。

overflow: hidden； 隐藏超出单元格的部分。

text-overflow: ellipsis； 将被隐藏的那部分用省略号代替。

若是想要超出指定的行数再显示...

css为

word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2; //这里写的数字是几就是超过几行剩余的显示省略号
-webkit-box-orient:vertical;
overflow:hidden;

css实现超出部分用...代替的更多相关文章

  1. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

  3. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  4. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  5. css控制超出部分自动省略&period;&period;&period;

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

  6. css 文字超出部分显示省略号&lpar;原&rpar;

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  7. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

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

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

  9. css文字超出一行用点表示

    1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

随机推荐

  1. UIViewControllerTransitioningDelegate&comma; UIViewControllerAnimatedTransitioning

    #import "ModelAnimationDelegate.h" #import <UIKit/UIKit.h> #import "MapVC.h&quo ...

  2. C&num; Socket系列一 简单的创建socket的监听

    socket的应用场景,在快速,稳定,保持长连接的数据传输代码.Http也是socket封装出来的,基于一次请求一次回复,然后断开的socket连接封装. 比如我们常见的游戏服务器,目前的很火的物联网 ...

  3. Javascript 判断一个数字是否含有小数点

    JavaScript 判断一个数字是否含有小数点,如果含有,则返回该数字:如果不含小数点,则小数点后保留两位有效数字: function hasDot(num){ if(!isNaN(num)){ r ...

  4. 基础：从概念理解Lucene的Index（索引）文档模型

    转:http://blog.csdn.net/duck_genuine/article/details/6053430   目录(?)[+]   Lucene主要有两种文档模型:Document和Fi ...

  5. HDU 1885 Key Task（三维BFS）

    题目链接 题意 : 出口不止一个,一共有四种颜色不同的门由大写字母表示,而钥匙则是对应的小写字母,当你走到门前边的位置时,如果你已经走过相应的钥匙的位置这个门就可以走,只要获得一把钥匙就可以开所有同颜 ...

  6. ldap数据库--ODSEE--安装

    在安装之前最好查看一下服务器硬件是否满足要求,是否需要更改一些系统配置来达到使用ldap数据库的最有性能.实际使用的ldap数据库是oracle的产品,DS70即ODSEE. 安装环境:solaris ...

  7. php之str&lowbar;replace具体解释

    str_replace (PHP 4, PHP 5) str_replace - Replace all occurrences of the search string with the repla ...

  8. TypeScript 函数-函数类型

    //指定参数类型 function add(x:number,y:number){ console.log("x:"+x); // reutrn(x+y); } //指定函数类型 ...

  9. RIFF格式简介

    Resource Interchange File Format(简称RIFF),资源交换文件格式,是一种按照标记区块存储数据(tagged chunks)的通用文件存储格式,多用于存储音频.视频等多 ...

  10. 洛谷P2525 Uim的情人节礼物&&num;183&semi;其之壱 &lbrack;康托展开&rsqb;

    题目传送门 Uim的情人节礼物·其之壱 题目描述 情人节到了,Uim打算给他的后宫们准备情人节礼物.UIm一共有N(1<=N<=9)个后宫妹子(现充去死 挫骨扬灰!). 为了维护他的后宫的 ...

相关文章