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>
    

      

  • 相关阅读:
    JSON1
    program的发展史及两个方法
    统计字符出现的次数
    美国十大web2.0公司背后的故事
    web history-----JavaScript 的起源故事
    Baidu_Map
    My json(Demo)
    program发展史及 forecast
    js事件类型
    字符统计与正则表达式
  • 原文地址:https://www.cnblogs.com/handboy/p/11565444.html
Copyright © 2011-2022 走看看