首页 > 其他分享 >flex布局,子元素自动撑开并打点(省略)

flex布局,子元素自动撑开并打点(省略)

时间:2024-05-25 18:11:41浏览次数:19  
标签:flex 省略 color 撑开 点点滴滴 nowrap

image

    .box {
      display: flex;
      align-items: center;
      width: 200px;
    }
    .label {
      margin-right: 4px;
      background-color: #ccc;
      color: #fff;
      white-space: nowrap;
    }
    .desc {
      flex: 1;/** 自动撑开 */
      width: 0;/** 设置了省略才生效 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
<div class="box">
    <span class="label">标签:</span>
    <div class="desc">我是描诉的味道的点点滴滴点点滴滴点点滴滴点点滴滴的</div>
  </div>

标签:flex,省略,color,撑开,点点滴滴,nowrap
From: https://www.cnblogs.com/husq/p/18212743

相关文章

  • Flex 布局
    【Flex布局介绍】什么是Flex布局#1布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现#2Flex是FlexibleBox或flexbox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性......
  • flex弹性布局3
    /*所有项目在主轴上的对齐,有一个前提:主轴上必须存在剩余空间*//*所谓对齐就是主轴上的剩余空间如何在项目之间进行分配*//*默认:剩余空间位于所有项目的右边*/justify-content:flex-start;左justify-content:flex-end;右justify-content:center;中间......
  • flex弹性布局2
    /*当flex容器无法包裹住flex项目时我们可以通过一些调整来实现包裹*//*允许换行,转为多行容器*/flex-wrap:wrap;/*主轴方向,也就是水平方向*//*flex-direction:row;是默认值也就是从左向右排列*//*flex-direction:row-reverse;表示从右向左排......
  • CSS多行多列 间隔 ,文字超出省略
    .village-list{margin:0auto;width:calc(100%-10px);display:flex;flex-wrap:wrap;justify-content:space-between;}.village-list:after{content:'';width:-webkit-calc((100%-3px*2)/2);width:calc(......
  • flex弹性布局及应用
    <!--flex的弹性布局--><template> <divclass="box">  <divclass="box1">1</div>  <divclass="box1">2</div>  <divclass="box1">3</div>  <divclass=&qu......
  • FSMO(Flexible Single Master Operation)
    首先,ActiveDirectory是集中式存储库(centralrepository),其中存储企业中的所有对象及其各自的属性。它是一个分层(hierarchical)多主(Multi-master)模型的数据库。无论域控制器(DC)联网与否,都可以在企业中任意给定的DC上处理对数据库的更改。这当中,[多主]意味着可......
  • echarts X轴字数太长显示不全,使用省略显示全部内容
    需求:echartsX轴字数太长显示不全,产品经理需要把多余的省略掉,然后鼠标悬浮的时候显示全部内容先说一下我的解决思路吧1.我先想到的是将xAxis里的data数据截取前六位,然后使用.substring(0,6)+'...'字符串截取去显示,发现不可行,因为那样鼠标悬浮还是会被截取掉的2.xAxis不行之后......
  • 【论文阅读】FlexGraph: A Flexible and Efficient Distributed Framework for GNN Tr
    阅读思考问题:PleasebrieflydescribehowhierarchicaldependencygraphsarebuiltinFlexGraph,andpointoutthespecificstageintheNAUabstractionwherethisprocesstakesplace.请简要描述在FlexGraph中如何构建分层依赖图,并指出在NAU抽象中的具体阶段发生此......
  • CSS的Flexbox布局示例详解
    CSSFlexibleBoxModule(简称Flexbox)是一种现代化的布局模式,用于创建响应式的一维布局(无论是水平还是垂直)。它提供了对项目的对齐、方向、排序、尺寸调整等方面的强大控制。下面是对Flexbox布局的一些关键概念和示例代码:一、关键概念FlexContainer(弹性容器):需要添加display:f......
  • Flex布局-margin 妙用技巧
    在flex布局中,通过对子项设置margin-auto;的方式去吃掉剩余空间,这种小技巧在很多时候能极大简化我们的布局哦.单元素水平垂直居中如果父容器是flex,要实现元素水平垂直居中,直接在容器项添加:display:flex;justify-content:center;align-items:center;但......