当前位置: 首页 > Web前端 > CSS

flex实现左右布局按钮溢出隐藏效果

时间:2023-03-31 12:05:43 CSS

最近在开发公司项目时,UI设计稿给了这样一个设计(这里是我手动画的草图):看这个效果,第一个感觉很简单,flex布局,左边宽度自适应,右边宽度固定。先回顾一下隐藏文字溢出的方式:/*Singlelinetext*/.text{text-overflow:ellipsis;溢出:隐藏;空白:nowrap;/*当然需要增加width属性来兼容部分浏览。*/}/*多行文本*/.text{display:-webkit-box;-webkit-box-orient:垂直;-webkit-line-clamp:3;溢出:隐藏;/*-webkit-line-clamp显示行数*/}开始愉快的写,代码如下:HTML代码这是一个按钮

9.9元
CSS样式#flex{display:flex;}#left{flex:1;}#left{背景:红色;文本溢出:省略号;溢出:隐藏;空白:nowrap;}#leftspan{背景色:黄色;边界半径:30px;边框:1px纯蓝色;{背景:绿色;宽度:200px;margin-left:10px;}这个效果。.有点无语。.右边的圆角在哪里,在控制台查看元素时,会看到实际span元素的宽度很宽,超过了父容器#left,而#left其实是正常宽度。想了想,各种元素的层叠关系出现在脑海中,于是在实际的文字内容外加了一层div来控制内容的宽度。HTML代码我在左边,自适应布局
我在右边,固定宽度CSS样式#flex{display:flex;}#left{flex:1;背景:红色;文本溢出:省略号;溢出:隐藏;white-space:nowrap;}/*新内容的父容器*/#left.box{background:red;文本溢出:省略号;溢出:隐藏;空白:nowrap;最大宽度:100%边框:1px纯蓝色;边框半径:100px;显示:内联块;}#leftspan{背景色:黄色;border-radius:30px;}#right{背景:绿色;宽度:200px;left:10px;}这里只需要将原来在span上设置的宽度、边框、圆角和背景色样式写到父容器.box中,span只负责存储文本内容。然后你就完成了。本文纯属个人观点,欢迎讨论个人博客github