css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号...
项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到。
单行超出
.oneline {
width:300upx; /*宽度一定要设置*/
overflow: hidden; /*文本超出隐藏*/
text-overflow: ellipsis; /*文本超出显示省略号*/
white-space: nowrap; /*超出的空白区域不换行*/
}
多行超出
.twoline {
width:300upx; /*宽度一定要设置*/
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*多行在这里修改数字即可*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
}
css文字单行/多行超出显示省略号...的更多相关文章
- Html中文字过多,单行超出和多行超出显示省略号
本博客主要介绍 前端开发中文本过多,以省略号显示. 效果如图: 单行: <!--单行--> <p class="pl">这个属 ...
- div或者p标签单行和多行超出显示省略号
单行文本溢出显示省略号 overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本显示省略号 display: -webkit-b ...
- css实现多行超出显示省略号?
可以实现,但是用的是-webkit-私有属性.我用js已经解决了.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-over ...
- CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...
- 文本超出显示省略号CSS
单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- CSS自己主动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...
- CSS自动换行、强制不换行、强制断行、超出显示省略号
转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
随机推荐
- CF208E Blood Cousins(DSU,倍增)
倍增求出祖先,\(\text{DSU}\)统计 本来想用树剖求\(K\)祖,来条链复杂度就假了 #include <cstring> #include <cstdio> #in ...
- BZOJ3295/Luogu3157 [CQOI2011]动态逆序对 (CDQ or 树套树 )
/* Dear friend, wanna learn CDQ? As a surprice, this code is totally wrong. You may ask, then why yo ...
- Redis 15 主从复制
参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 主从复制 ...
- Git 10 IDEA撤销推送
参考源 https://www.bilibili.com/video/BV1FE411P7B3?spm_id_from=333.999.0.0 版本 本文章基于 Git 2.35.1.2 如果推送了多 ...
- 搭建 Webpack + TypeScript + Babel 的项目
安装依赖包 安装 webpack 相关的依赖: npm i -D webpack webpack-cli 安装 ts.babel.source-map 的 loader: npm i -D ts-lo ...
- UI自动化框架搭建之Python3
UI自动化框架搭建--unittest 使用的代码是Python3版本,与时俱进哈哈 解释一下我的框架目录接口(每个人框架的目录接口不一样,根据实际要求) common目录:公共模块,这个地方可以存放 ...
- SSM整合,快速新建javaWeb项目
整合前需要了解: spring和springmvc包扫描的注意事项 Spring applicationContext.xml (父容器),SpringMVC springmvc-servlet.xm ...
- Minio分布式集群部署——Swarm
最近研究minio分布式集群部署,发现网上大部分都是单服务器部署,而minio官方在github上现在也只提供了k8s和docker-compose的方式,网上有关与swarm启动minio集群的文章 ...
- iOS白嫖系列Testflight
1.Picsart 白嫖一年会员 使用 Picsart 照片编辑器和视频编辑器,您可以将您的创意变为现实.制作专业级拼贴画.设计和添加贴纸.快速移除和交换背景.尝试热门编辑,如黄金时段.镜子自拍和复古 ...
- KubeEdge:下一代云原生边缘设备管理标准DMI的设计与实现
摘要:KubeEdge设备管理架构的设计实现,有效帮助用户处理设备数字孪生进程中遇到的场景. 本文分享自华为云社区<KubeEdge:下一代云原生边缘设备管理标准DMI的设计与实现>. 随 ...