南京网站建设开发,天津建设工程评标专家信息网,软件商店安装下载2023,网站生成自助单行文本溢出省略
text-overflow#xff1a;规定当文本溢出时#xff0c;显示省略符号来代表被修剪的文本
white-space#xff1a;设置文字在一行显示#xff0c;不能换行
overflow#xff1a;文字长度超出限定宽度#xff0c;则隐藏超出的内容overflow设为hidden#…单行文本溢出省略
text-overflow规定当文本溢出时显示省略符号来代表被修剪的文本
white-space设置文字在一行显示不能换行
overflow文字长度超出限定宽度则隐藏超出的内容overflow设为hidden普通情况用在块级元素的外层隐藏内部溢出元素或者配合下面两个属性实现文本溢出省略
white-space:nowrap作用是设置文本不换行是overflow:hidden和text-overflowellipsis生效的基础
text-overflow属性值有如下clip当对象内文本溢出部分裁切掉
ellipsis当对象内文本溢出时显示省略标记…text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的多行文本溢出省略
多行文本溢出的时候我们可以分为两种情况
基于高度截断
伪元素 定位
核心的css代码结构如下position: relative为伪元素绝对定位
overflow: hidden文本溢出限定的宽度就隐藏内容
position: absolute给省略号绝对定位
line-height: 20px结合元素高度,高度固定的情况下,设定行高, 控制显示行数
height: 40px设定当前元素高度
::after {} 设置省略号样式实现原理很好理解就是通过伪元素绝对定位到行尾并遮住文字再通过 overflow: hidden 隐藏多余文字
这种实现具有以下优点兼容性好对各大主流浏览器有好的支持
响应式截断根据不同宽度做出调整一般文本存在英文的时候可以设置word-break: break-all使一个单词能够在换行时进行拆分基于行数截断
-webkit-line-clamp: 2用来限制在一个块元素显示的文本的行数为了实现该效果它需要组合其他的WebKit属性
display: -webkit-box和1结合使用将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical和1结合使用 设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis多行文本的情况下用省略号“…”隐藏溢出范围的文本如果文本为一段很长的英文或者数字则需要添加word-wrap: break-word属性。
