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>
    

      

  • 相关阅读:
    编译 安装 infobright
    MySQL忘记密码恢复密码的实现方法
    Intel 服务器 架构 NUMA
    Centos 卸载 java
    vs2010 无法将文件“obj**”复制到“bin**”
    linux安装eclipse PyDev
    infobright 编译安装
    [转贴]==开手排车的八个绝招==
    [摘]广义企业级PDM系统下的PPM(工艺规划管理)
    中国皇帝定下佛教戒律:僧人不准吃肉
  • 原文地址:https://www.cnblogs.com/handboy/p/11565444.html
Copyright © 2011-2022 走看看