css文字超出显示省略号
单行:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
例子:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div {margin:0 auto ;width:300px;color: red;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style></head><body><div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div></body></html>
结果:
多行:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
例子:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div {margin: 0 auto;width: 300px;color: red;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}</style></head><body><div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div></body></html>
结果:
css文字超出显示省略号相关推荐
- 【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
- css 文字超出显示省略号
css 文字超出显示省略号 <html> <style type="text/css">div{width: 100px;overflow: hidden; ...
- 关于css文字超出显示省略号失效
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_44932450 只需要加上 /* autoprefixer: off */ /*aut ...
- css实现文字超出显示省略号...
01.块状元素单行文本超出显示省略号: ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ove ...
- CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言 在我们开发过程中,其实有这样的 ...
- CSS文本超出显示省略号
CSS文本超出显示省略号 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- css文字超出部分省略号
css文字超出部分省略号 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
- 兼容ie的文字超出显示省略号
兼容ie的文字超出显示省略号 单行文本的溢出显示省略号: (需要加宽度width兼容部分浏览器) overflow: hidden; // 超出隐藏 text-overflow:ellipsis; / ...
- canvas 文字超出显示省略号
项目实例,点击可查看 以uni-app框架为例:可以把画图封装成一个函数调用. activityCanvas: function(arrImages, storeName, price, people ...
最新文章
- 如何查看OpenCV自带函数的源代码
- MvvmLight:Command
- Source Insight 常用设置和快捷键大全
- C++ Opengl 多重纹理源码
- 如何理解和分析linux系统的CPU平均负载情况(load average)
- python爬虫和八爪鱼哪个快_【后端开发】python爬虫和八爪鱼哪个快
- 年总结(七):这半年的生活(2017.1—2017.7)
- 洛谷——P1680 奇怪的分组
- 浅谈C#实现Web代理服务器的几大步骤
- 使用with语句:记录时间检查路径
- window python环境搭建_Python入门-环境搭建详解(Window平台)
- redis 学习笔记(6)-cluster集群搭建
- android连接airprint打印机,AirPrint:iOS的打印机
- 使用windows 7有感
- win10远程控制+Android,win10实现手机远程控制电脑步骤分享
- 2020.10.16 web前端 盒子模型border-box 图片模糊处理(filter)clac的使用 CSS的过渡(trancsion hover)
- 怎么取消工作组计算机,windows10系统如何退出workgroup工作组 windows10系统退出workgroup工作组的操作方法...
- MySQL3_外键及查询
- [9i]多练扎马步,预防膝盖疼痛
- 自制Openerp图表
热门文章
- 麦当劳中国发布首个NFT创意作品“巨无霸魔方”
- SecureCRT 使用python脚本
- Altium Designer 电气规则检查 报错:[Un-Routed Net Constraint Violation]
- .net学习笔记12--数据验证控件--RegularExpressionValidator
- 写一篇高等职业学校关于产教融合的论文,不少于8000字
- Hadoop基础原理
- 二次元古代美女【InsCode Stable Diffusion美图活动一期】
- lua怎么嵌入php,在嵌入式设备上使用lua实现cgi的方法
- org.apache.commons.fileupload.DiskFileUpload使用
- Java Post方式上传文件