css实现文本溢出省略号
CSS常用属性:
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行,只能显示一行 这个只是用适用于单行文本溢出情况,之前处理多行文本的话需要JS来支持。 CSS3新加属性:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //需要组合上面两个属性,参数是显示的行数。 实现一个两行文本溢出省略
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
css实现文本溢出省略号的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- css实现文本溢出用...显示
文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css基础 -文本溢出 text-overflow:ellipsis;
.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...
- 浅谈文本溢出省略号代表修剪text-overflow
一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性. 示例 ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- css文本溢出省略号大总结,如你所愿
一行: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 两行: width ...
- css 文本溢出省略号
单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
- css文本溢出省略号
.ellip{ display: block; width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...
随机推荐
- WPF dxe:ComboBoxEdit 选择项后并可编辑值
有个需要,在ComboBoxEdit中选择多个值,并且要求可以直接在后面添加新的值. 开始的时候绑定列表,设置DisplayMember,不能修改. 然后绑定List<string>,不设 ...
- git的回退以及合并,删除什么的
有时候不小心合并了别的分支中的commit.我们需要回退某些提交记录.可以通过reset来操作,reset 会回退到指定commit.这种方式会删除记录,我们最好使用revert命令来操作 git r ...
- mysql数据库备份(windows环境)
备份:cmd输入指令,按照新数据库的字符集去备份,备份等待即可: 恢复:之前新建数据库,注意字符集问题,输入指令还原即可:
- python中时间的datatime的模块
datetime.datetime.now().strftime('%Y-%m-%d-%H_%M_%S')1.python datetime模块用strftime 格式化时间 import datet ...
- 共享USB打印机设置方法
打印机共享 一.准备 所有计算机在同一个网段. 所有计算机在同一个工作组,组名可以自定义,默认WORKGROUP. 使用超级管理员用户,目的是为了激活guest用户.验证之后可以不需要此前提. 二.主 ...
- 使用react-vite-antd,修改antd主题,报错 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options? It is hacky way to make this function will be compiled preferentially by less
一般报错 在官方文档中,没有关于vite中如何使用自定义主题的相关配置,经过查阅 1.安装less yarn add less (已经安装了就不必再安装) 2.首先将App.css改成App.les ...
- ElasticSearch 实现分词全文检索 - 测试数据准备
目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...
- 个人数据保全计划:(2) NAS基础知识
前言 距离去年国庆入手了NAS至今有好几个月时间了,NAS折腾起来有点麻烦,且实际作用因人而异,并没有想象中的好用,所以说好的这个系列一直没有更新~ 还有另一方面的原因,这些NAS的系统基于Linux ...
- 从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用
前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus. ...
- (续)关于jsp的小细节们
(续集) 细节四:在浏览界面,点击主键对应的数据时,会跳转到其详细信息界面 这样就实现跳转详情页面啦!(jsp再进入一个servlet文件,获取到当前主键的值,然后再传回到另一个jsp文件,就可以实现 ...