【css】使用弹性盒子布局时,省略号问题
栗子:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性盒子省略号问题</title> <style> *{ margin: 0; padding: 0; }
.ui-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .ui-flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ui-flex-basis{ flex: 1 0 0; } .ut-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ut-s-line{ display: -webkit-box; /**对象作为伸缩盒子模型展示**/ -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/ -webkit-line-clamp: 1; /**显示的行数**/ overflow: hidden; /**隐藏超出的内容**/ text-overflow: ellipsis; white-space: normal; word-break: break-all; /*允许在单词内换行*/ } .ut-s-line2{ display: -webkit-box; /**对象作为伸缩盒子模型展示**/ -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/ -webkit-line-clamp: 2; /**显示的行数**/ overflow: hidden; /**隐藏超出的内容**/ text-overflow: ellipsis; white-space: normal; word-break: break-all; /*允许在单词内换行*/ } .main-container{ width:500px; margin: 0 auto; } .box{ border:1px solid red; padding:10px; } h6{ margin:20px; text-align: center; } .box-left{ width: 200px; height: 200px; border:1px solid #ccc; margin-right: 20px; } .box-right-bottom{ padding:10px 0; } .box-right-top{ } .box-right-title{ width:calc(100% - 222px ); } </style> </head> <body> <div class="main-container"> <h6>容器1(ui-flex容器内直接包裹内容,然后使用省略号的css代码即实现 )</h6> <div class="ui-flex box"> <div class="box-left"></div> <div class="box-right ui-flex-1 ut-s"> 我是标题我是表我是标题我是表我是标题我是表我是标题我是表 </div> </div> <h6>容器2</h6> <div class="ui-flex box"> <div class="box-left"></div> <div class="box-right ui-flex-1"> <div class="box-right-top ut-s">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div> <div class="box-right-bottom"> 2023年1月12日</div> </div> </div> <h6>容器3(对象作为伸缩盒子模型展示 display:box)</h6> <div class="ui-flex box"> <div class="box-left"></div> <div class="box-right ui-flex-1"> <div class="box-right-top ut-s-line">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div> <div class="box-right-bottom"> 2023年1月12日</div> </div> </div> <h6>容器4(指定弹性元素的宽度)</h6> <div class="ui-flex box"> <div class="box-left"></div> <div class="box-right ui-flex-1" style="width:calc(100% - 222px)"> <div class="box-right-top ut-s">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</div> <div class="box-right-bottom"> 2023年1月12日</div> </div> </div> </div> </body> </html>
效果:
相关资料:
作者:smile.轉角
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
欢迎关注我,一起进步!扫描下方二维码即可加我QQ

分类:
css
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」