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标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
随机推荐
- Blazor预研与实战
背景 最近一直在搞一件事,就是熟悉Blazor,后期需要将Blazor真正运用到项目内.前期做了一些调研,包括但不限于 Blazor知识学习 组件库生态预研 与现有SPA框架做比对 与WebForm做 ...
- C++大数据的读写
当一个文件1G以上的这种,使用内存文件映射会提高读写效率: 下边时段出自<windows核心编程>,读取一个大文件,然后统计里边字符出现次数的函数: __int64 CountOs(voi ...
- MySQL字段类型与操作
MYSQL字段类型与操作 字符编码与配置文件 操作 代码 功能 查看 \s 查看数据库基本信息(用户.字符编码) 配置(配置文件层面) my-default.ini windows下MySQL默认的配 ...
- C++ 对于函数名的操作,函数名本身和取*以及取&的区别
void TestFunc() { } int _tmain(int argc, _TCHAR* argv[]) { cout<<TestFunc<<endl; cout< ...
- TCP/UDP报文格式
TCP报文格式 源端口:数据发送方的端口号 目的端口:数据接收方的端口号 序号:本数据报文中的第一个字节的序号(在数据流中每个字节都对应一个序号) 确认号:希望收到的下一个数据报文中的第一个字节的序号 ...
- 《Java编程思想》读书笔记(四)
前言:三年之前就买了<Java编程思想>这本书,但是到现在为止都还没有好好看过这本书,这次希望能够坚持通读完整本书并整理好自己的读书笔记,上一篇文章是记录的第十七章到第十八章的内容,这一次 ...
- KingbaseES OOM 可能原因汇总
背景 不久前,遇到过一个问题.KingbaseES数据库主机系统触发OOM现象是数据库进程被KILL, 数据库进入crash然后restart(when restart_after_crash=on) ...
- Markdown Support
Markdown 支持一览 Markdown 支持一览 身正不怕影子斜 我实在没有说过这样一句话 -- 鲁迅 古代文学史发展脉络 唐诗 宋词 元曲 冯·诺依曼结构 运算器 控制器 存储器 输入输出设备 ...
- kafka的auto.offset.reset详解与测试
1. 取值及定义 auto.offset.reset有以下三个可选值: latest (默认) earliest none 三者均有共同定义: 对于同一个消费者组,若已有提交的offset,则从提交的 ...
- tcmalloc 动态库替换(CentOS 操作系统)
Ceph 14.2.8版本中tcmalloc存在内存泄漏的问题,需要将tcmalloc pagesize调整为64,重新编译,替换tcmalloc动态库,该操作在三个Ceph存储节点上均需要执行. 步 ...