多行溢出文字省略号显示(HTML、CSS)
多行溢出文字省略号显示(HTML、CSS)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多行溢出文字省略号显示</title><style>div {width: 150px;height: 62px;background-color: skyblue;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 3;/* 设置或检索伸缩对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head><body><div>在一个漆黑的夜晚,我从睡梦中惊醒过来!!!一摸后背全是汗水。宿友们已经睡熟了。这时对着我床位的窗户被一阵风呼的一声吹开了,</div>
</body></html>
多行溢出文字省略号显示(HTML、CSS)相关推荐
- 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
- CSS常用技巧(元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美)
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
- 单行溢出文字省略号显示(HTML、CSS)
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- 【web前端】CSS高级技巧(精灵图,字体图标,CSS三角,CSS用户界面样式,文字与图片垂直对齐,溢出的文字省略号显示,常见布局技巧,CSS初始化)
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
- CSS基础(part18)--溢出的文字省略号显示
学习笔记,仅供参考,有错必纠 参考自:pink老师课堂笔记 文章目录 溢出的文字省略号显示 white-space text-overflow 溢出的文字省略号显示三部曲 举个例子 溢出的文字省略号显 ...
- 十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)
4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...
- CSS 系列七 高级技巧篇 精灵图 、字体图标 、CSS三角 、 图片和文字对齐以及bug 、溢出文字省略号 、CSS 初始化 、 常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
- css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
最新文章
- Pro ASP.NET MVC –第五章 使用Razor
- python爬虫学习:爬虫QQ说说并生成词云图,回忆满满
- SAP Cloud for Customer图片渲染逻辑的调试
- appium+python自动化57-chromedriver与chrome版本
- daily scrum 11.9
- 官网下载旧版本的Xcode
- 蚂蚁金服:超大规模分布式计算系统 + 超大规模分布式优化算法
- php自定义类生成lib,thinkphp引入自定义封装类
- zabbix:unable to create mutex for log file
- 递归实现将十进制转化为二进制
- ubuntu环境下载android源码
- 一个著名防外挂软件,下面转载一遍关于nProtect的破解
- 网络TCP/IP基础(IP地址网络汇总与规划)
- c语言 宏do while,关于C语言宏定义 使用do{ xxxx }while()
- SAP 采购申请审批
- 迅雷、QQ旋风-链接自动转换(Download link conversion)
- fcpx插件:Stupid Raisins Look Pop(30个时尚标注插件)
- ZZULIOJ 1800 少水群多刷题
- POJ-3255 Roadblocks
- 映美Jolimark BP-900K(医疗版) 打印机驱动
热门文章
- 使用Asp.Net MVC开发兼职文章系统
- 以Crypto++实现RSA加解密二进制数据
- 体验Vs2005 beta2 测试工具
- Zabbix---3 监控主机内存使用率
- Ubuntu服务器宕机排查记录
- linux shell脚本监控进程崩溃自动重启
- 【MySQL】RPM包安装
- Xcode真机调试中“There was an internal API error“错误解决方法
- 处理quartz 异常 Couldn‘t retrieve trigger: No record found for selection of Trigger with key:
- 应用栈解决迷宫问题的C语言实现