做服装团购有哪些网站,切图做网站过时了吗,电商培训班一般多少钱,成都市建筑设计研究院有限公司在日常开发展示页面#xff0c;如果一段文本的数量过长#xff0c;受制于元素宽度的因素#xff0c;有可能不能完全显示#xff0c;为了提高用户的使用体验#xff0c;这个时候就需要我们把溢出的文本显示成省略号。
一. 单行文本溢出 即文本在一行内显示#xff0c;超出…在日常开发展示页面如果一段文本的数量过长受制于元素宽度的因素有可能不能完全显示为了提高用户的使用体验这个时候就需要我们把溢出的文本显示成省略号。
一. 单行文本溢出 即文本在一行内显示超出部分以省略号的形式展现 1. 涉及的CSS属性 overflow: hidden white-space: nowrap text-overflow: clip/ellipsis clip当对象内文本溢出部分裁切掉ellipsis当对象内文本溢出时显示省略标记(...) 二. 多行文本溢出
1. 基于高度截断 伪元素定位 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle.demo {position: relative;line-height: 20px;height: 40px;overflow: hidden;}.demo::after {content: ...;position: absolute;bottom: 0;right: 0;padding: 0 20px 0 10px;}/style/headbodydiv classdemo这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本/div/body
/html
2. 基于行数截断 -webkit-line-clamp: 2 // 用来限制一个块元素显示的文本行数 display: -webkit-box // 和1结合使用将对象作为弹性伸缩盒对象的子元素 -webkit-box-orient: vertical // 和1结合使用设置或检索伸缩盒对象的子元素的排列方式 overflow:hidden // 文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis // 多行文本的情况下用省略号...隐藏溢出范围的文本
