应用css文本省略（······）属性：`-webkit-line-clamp: 3;` 导致：行高错位。（`F12`查看发现`css`属性`line-height`的值并没变，但为什么浏览器显示文本的实际行距却变小？）

样式bug · 截图说明：

上面的文字仅仅只是设置了line-height属性；

因为： 没有设置height行高属性，
所以： 在缩放的时候，导致了这种bug问题现象。

这里示例以下代码，作为参考：

<el-card class="item" shadow="hover"><el-row><el-col :span="4"><div class="box1"><div class="it-pic"><img src="../../../static/images/default-mm.png" class="thumb-hd"></div><p class="it-name">培源</p><p class="it-sexage">女 | 32岁</p></div></el-col><el-col :span="4"><div class="box2"><p class="it-yy clamp1"><b>工作年限：</b>15年工作经验</p><p class="it-edu clamp1"><b>最高学历：</b>本科</p><p class="it-state clamp1"><b>求职状态：</b>离职-随时到岗</p><p class="it-money clamp1"><b>期望薪资：</b>3千~4千/月</p></div></el-col><el-col :span="2" class="border">&nbsp;&nbsp;</el-col><el-col :span="9"><div class="box2"><p class="it-area clamp1"><b>期望地点：</b><span class="tips">经开区 明珠广场</span></p><p class="it-position clamp1"><b>期望职位：</b><span class="tips">销售经理</span></p><p class="it-evaluate clamp3">该员工有分析销售数据，确定销售潜力并监控客户的偏好。有较强的组织能力，沟通能力，交际能力，创造能力，商务技能，谈判策略以及管理下属能力。</p></div></el-col><el-col :span="1">&nbsp;&nbsp;</el-col><el-col :span="3"><div class="box3 text-r mx-w120"><p class="it-uptime clamp1">3分钟前发布</p><div class="it-before"><div class="btn1"><el-button type="primary" icon="el-icon-download" plain>下载到人才库</el-button></div><div class="btn2"><el-button type="info" icon="el-icon-warning" plain disabled >举报该简历</el-button></div></div><div class="it-after"><p class="it-telphone clamp1">13397875556</p><div class="btn3"><el-button type="primary" icon="el-icon-warning" plain>举报该简历</el-button></div></div></div></el-col></el-row>
</el-card>=================================================================              .box2 p{font-size: 14px;color: #999;text-align: left;height:30px;   // 注意1： 后来添加这句，就没问题了line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;
}
.box2 .clamp1{-webkit-line-clamp: 1!important;}
.box2 .clamp2{-webkit-line-clamp: 2!important;}
.box2 .clamp3{-webkit-line-clamp: 3!important;}

以上就是关于“ css文本省略（······）行高错位（bug）- 解决办法 ” 的全部内容。

css文本省略（······）行高错位（bug）- 解决办法相关推荐

文本溢出处理和文本首行空两格解决办法
文本溢出处理 word-break:规定自动换行的处理方法,一般取值为keep-all(在半角空格或连字符处换行) overflow:规定当内容溢出元素框时发生的事情, 一般取值为hidden(隐藏) ...
html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...
今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于css中line-height(行高)设置无效 ...
css控制文本的行高
line-height可以控制文本的行高示例 <p> 这是一个标准行高的段落. 在大多数浏览器默认行高约20 px. 这是一个标准行高的段落. 这是一个标准行高的段落. </p&g ...
html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法
关于css中line-height(行高)设置无效的问题我们先写下这一串代码: Document .head{ height: 100px; text-align: center; line-hei ...
7. 前端基础--CSS背景和行高
文章目录 CSS背景和行高 1. CSS 背景(background) 1.1 背景颜色(color) 1.2 背景图片(image) 1.3 背景平铺(repeat) 1.4 背景位置(positi ...
HTML5自动换行的间距设置,div css p段落行高行距怎么设置篇
如何使用div+css样式设置p段落之间的上下间距,需要设置哪些样式来控制之间行距距离呢?css行高怎么写等问题,让大家彻底掌握div css p行距行高样式. DIVCSS5为大家介绍如何通过CS ...
关于css中line-height(行高)设置无效的问题
关于css中line-height(行高)设置无效的问题我们先写下这一串代码: <!DOCTYPE html> <html lang="en"> < ...
css设置1.5倍行高,CSS怎么控制行高？
CSS怎么控制行高? css中,调整每行文字字体间距(行距)是使用line-height属性. ● line-height 属性设置行间的距离(行高). 注:不允许使用负值. 要实现上下换行文字行间距 ...
div css文字字体行高行距深入理解css行间距设置
div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性. 要使得每行的 ...

css文本省略（······）行高错位（bug）- 解决办法

应用css文本省略（······）属性：`-webkit-line-clamp: 3;` 导致：行高错位。（`F12`查看发现`css`属性`line-height`的值并没变，但为什么浏览器显示文本的实际行距却变小？）

样式bug · 截图说明：

css文本省略（······）行高错位（bug）- 解决办法相关推荐

最新文章

热门文章

css文本省略（······）行高错位（bug）- 解决办法

应用css文本省略（······）属性：-webkit-line-clamp: 3; 导致：行高错位。（F12查看发现css属性line-height的值并没变，但为什么浏览器显示文本的实际行距却变小？）

样式bug · 截图说明：

css文本省略（······）行高错位（bug）- 解决办法相关推荐

最新文章

热门文章

应用css文本省略（······）属性：`-webkit-line-clamp: 3;` 导致：行高错位。（`F12`查看发现`css`属性`line-height`的值并没变，但为什么浏览器显示文本的实际行距却变小？）