原码笔记

原码笔记

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

小诸哥 0

最近在开发公司项目的时候UI设计稿给了这么一个设计(这里是我手动画的草图):

看这效果,第一感觉很简单,flex布局,左边宽度自适应,右边固定宽度。

先回顾下关于文本溢出隐藏的方式:

  1. /* 单行文本 */
  2. .text {
  3.      text-overflow: ellipsis;
  4.      overflow: hidden;
  5.      white-space: nowrap;
  6.      /*当然还需要加宽度width属来兼容部分浏览。*/
  7. }
  8.  
  9. /* 多行文本 */
  10. .text {
  11.      display: -webkit-box;
  12.      -webkit-box-orient: vertical;
  13.      -webkit-line-clamp: 3;
  14.      overflow: hidden;
  15.      /* -webkit-line-clamp 显示行数 */
  16. }

然后开开心心的开始写啊写,代码如下:

HTML代码

  1. <div id="flex">
  2.      <div id="left">
  3.          <span>这是一个按钮</span>
  4.      </div>
  5.      <div id="right">
  6.          <span>9.9元</span>
  7.      </div>
  8. </div>

css样式

  1. #flex {
  2.      display: flex;
  3. }
  4.  
  5. #left {
  6.      flex: 1;
  7. }
  8. #left{
  9.      background: red;
  10.      text-overflow: ellipsis;
  11.      overflow: hidden;
  12.      white-space: nowrap;
  13. }
  14. #left span{
  15.      background-color: yellow;
  16.      border-radius: 30px;
  17.      border: 1px solid blue;
  18.      display: inline-block;
  19. }
  20.  
  21. #right {
  22.      background: green;
  23.      width: 200px;
  24.      margin-left: 10px;
  25. }

这效果。。有点无语。。右边的圆角去哪里了呢,并且在控制台查看元素,会看到实际span元素的宽度非常的宽,且超过父容器#left,而#left实实在在的还是正常的宽度。
思考了一会,脑子了出现了各种元素的层叠关系,于是给实际文本内容外面,再添加一层div,来控制内容的宽度。

HTML代码

  1. <div id="flex">
  2.      <div id="left">
  3.          <div class="box">
  4.              <span>我在左边,自适应布局</span>
  5.          </div>
  6.      </div>
  7.      <div id="right">我在右边,定宽</div>
  8. </div>

CSS样式

  1. #flex {
  2.      display: flex;
  3. }
  4.  
  5. #left {
  6.      flex: 1;
  7.      background: red;
  8.      text-overflow: ellipsis;
  9.      overflow: hidden;
  10.      white-space: nowrap;
  11. }
  12. /* 新增的内容的父容器 */
  13. #left .box{
  14.      background: red;
  15.      text-overflow: ellipsis;
  16.      overflow: hidden;
  17.      white-space: nowrap;
  18.      max-width: 100%;
  19.      border: 1px solid blue;
  20.      border-radius: 100px;
  21.      display: inline-block;
  22. }
  23. #left span{
  24.      background-color: yellow;
  25.      border-radius: 30px;
  26. }
  27.  
  28. #right {
  29.      background: green;
  30.      width: 200px;
  31.      margin-left: 10px;
  32. }

而这里只需把原本设置在span上的宽度,边框,圆角和背景色样式,写到父容器.box上就可以,span里面只负责存放文本内容。

然后就大功告成了。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: flex 溢出隐藏