多行或者单行文本超出两行显示点点点,如果保证…
2018-11-28 08:50:58来源:博客园 阅读 ()
我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-items:center;则当文字内容过多的时候会不上下文字有截断;
现在效果如下:
.info_des { .margin-all(10, 10, 12, 8); display: flex; align-items:center; div{ .line-height(21); .height(42); .font-size(14); color: #000; letter-spacing: 0.01px; } } /*只能显示两行,超出显示省略号*/ .line_clamp2{ overflow: hidden!important; text-overflow: ellipsis!important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; word-wrap: break-word; }
<div class="info_des"> <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform in</div> </div>
解决方法:
display:flex;垂直居中的是里面元素的居中,那就给外层div一个固定高度这里是两行文字的行高,里面文字不要给高度,当有一行的时候里面的div高度就是一行的高度就会垂直居中,有两行文字的时候就会显示两行的文字,并且不影响超出显示点点点的效果;
修改后的样式:
.info_des { .margin-all(10, 10, 12, 8); display: flex; align-items:center; .height(42); div{ .line-height(21); .font-size(14); color: #000; letter-spacing: 0.01px; } }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:第一章 初始HTML5
- 如何清除a标签或者span标签之间的默认留白间距 2020-03-19
- 行内和块状元素水平居中与单行或多行文本垂直居中及隐性改 2020-03-07
- 文字溢出省略 2019-11-21
- HTML识别后台传输或者js变量中字符串里的 '\n&# 2019-10-08
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略 2019-10-08
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash