Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
 
.flex {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    min-width: 0; /* 这里也要设置 */
}
.flex__item {
    min-width: 0;  /* 这里需要设置 */
}
.flex__item--fixed {
    flex: 0 0 auto;
}
.fs--ellip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
​
​
.text-c {
  text-align: center;
}
.bold {
  font-weight: bold;
}
.color-cyan {
  color: cyan;
}
.color-o {
  color: orange;
}
.color-9 {
  color: #999;
}
​
​
.home-shop {
  color: #333;
  max-width: 750px;
}
.home-shop__img {
        width: 64px;
        height: 64px;
    }
.home-shop__main {
  padding: 0 36px 0 18px;
}
.home-shop__fans {
  padding: 16px 16px 16px 26px;
  border-left: 2px solid #eee;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers