zoukankan      html  css  js  c++  java
  • flex下省略号的问题解决

          最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-0; 但是在我的尝试下,依然不行,原来在上层父级就是flex那一级别也需要设置 min-0; 就是可以理解为 省略号标签的flex-item以及所在的flex父级 都需要设置min-0;

    CSS: 
    .flex {
    	display: flex;
    	align-items: center;
    	align-content: center;
    	justify-content: space-between;
    	min- 0; /* 这里也要设置 */
    }
    .flex__item {
    	min- 0;  /* 这里需要设置 */
    }
    .flex__item--fixed {
    	flex: 0 0 auto;
    }
    .fs--ellip {
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    }
    
    
    .home-shop {
      max- 750px;
    }
    .home-shop__img {
    		 98px;
    		height: 98px;
    	}
    .home-shop__main {
      padding: 0 36px 0 18px;
    }
    .home-shop__fans {
      padding: 16px 16px 16px 26px;
      border-left: 2px solid #eee;
    }
    

     HTML:

    <div class="flex box home-shop">
    		<div class="flex">
    			<img class="flex__item--fixed home-shop__img" src="https://javascript.shop/apple-touch-icon.png" />
    			<div class="flex__item home-shop__main">
    				<div class="fsz28 fs--ellip">杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字</div>
    				<div class="fsz22 color-9">社区小商城</div>
    			</div>
    		</div>
    		<div class="flex flex__item--fixed">
    			<div class="text-c home-shop__fans">
    				<div class="fsz28 color-cyan bold">568</div>
    				<div class="fsz22 color-9">粉丝数</div>
    			</div>
    			<div class="text-c home-shop__hot">
    				<div class="fsz28 color-o bold">1898</div>
    				<div class="fsz22 color-9">购买指数</div>
    			</div>
    		</div>
    	</div>
    

      

  • 相关阅读:
    el-table单元格新增、编辑、删除功能
    div 拖拽
    dataTable 分页用法总结
    pc端字体大小计算以及echart中字体大小计算
    pc端字体大小自适应几种方法
    AB PLC教程
    Electric p8激活教程
    三菱FX系列PLC教程
    Visual Studio 2015简体中文企业版/专业版下载+有效激活密钥
    servlet在mvc里的分层,驻留内存的疑问?
  • 原文地址:https://www.cnblogs.com/handboy/p/11565444.html
Copyright © 2011-2022 走看看