多行溢出文字省略号显示(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)相关推荐

  1. 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值

    css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...

  2. CSS常用技巧(元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美)

    CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...

  3. 单行溢出文字省略号显示(HTML、CSS)

    单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...

  4. web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)

    文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...

  5. 【web前端】CSS高级技巧(精灵图,字体图标,CSS三角,CSS用户界面样式,文字与图片垂直对齐,溢出的文字省略号显示,常见布局技巧,CSS初始化)

    使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...

  6. CSS基础(part18)--溢出的文字省略号显示

    学习笔记,仅供参考,有错必纠 参考自:pink老师课堂笔记 文章目录 溢出的文字省略号显示 white-space text-overflow 溢出的文字省略号显示三部曲 举个例子 溢出的文字省略号显 ...

  7. 十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)

    4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...

  8. CSS 系列七 高级技巧篇 精灵图 、字体图标 、CSS三角 、 图片和文字对齐以及bug 、溢出文字省略号 、CSS 初始化 、 常见的布局技巧

    --------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

  9. css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)

    css高级技巧 1.精灵图 1.1.为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...

最新文章

  1. Pro ASP.NET MVC –第五章 使用Razor
  2. python爬虫学习:爬虫QQ说说并生成词云图,回忆满满
  3. SAP Cloud for Customer图片渲染逻辑的调试
  4. appium+python自动化57-chromedriver与chrome版本
  5. daily scrum 11.9
  6. 官网下载旧版本的Xcode
  7. 蚂蚁金服:超大规模分布式计算系统 + 超大规模分布式优化算法
  8. php自定义类生成lib,thinkphp引入自定义封装类
  9. zabbix:unable to create mutex for log file
  10. 递归实现将十进制转化为二进制
  11. ubuntu环境下载android源码
  12. 一个著名防外挂软件,下面转载一遍关于nProtect的破解
  13. 网络TCP/IP基础(IP地址网络汇总与规划)
  14. c语言 宏do while,关于C语言宏定义 使用do{ xxxx }while()
  15. SAP 采购申请审批
  16. 迅雷、QQ旋风-链接自动转换(Download link conversion)
  17. fcpx插件:Stupid Raisins Look Pop(30个时尚标注插件)
  18. ZZULIOJ 1800 少水群多刷题
  19. POJ-3255 Roadblocks
  20. 映美Jolimark BP-900K(医疗版) 打印机驱动

热门文章

  1. 使用Asp.Net MVC开发兼职文章系统
  2. 以Crypto++实现RSA加解密二进制数据
  3. 体验Vs2005 beta2 测试工具
  4. Zabbix---3 监控主机内存使用率
  5. Ubuntu服务器宕机排查记录
  6. linux shell脚本监控进程崩溃自动重启
  7. 【MySQL】RPM包安装
  8. Xcode真机调试中“There was an internal API error“错误解决方法
  9. 处理quartz 异常 Couldn‘t retrieve trigger: No record found for selection of Trigger with key:
  10. 应用栈解决迷宫问题的C语言实现