flex布局子元素元素不换行,且超出部分省略号展示

.punchCard-bottomArea{

display: flex;

justify-content:space-around;

background-color: white;

flex-direction: row;

height: 200rpx;

white-space:nowrap;//不换行

}

.punchCard-content{

margin:5rpx 10rpx 0 10rpx;

width: 250px;

overflow: hidden;//禁止内容溢出

text-overflow: ellipsis;//省略号

}

  

      {{content}}

      重新定位

你可能感兴趣的:(flex布局子元素元素不换行,且超出部分省略号展示)