css3:flex overflow ellipsis 层级处理
html:
<View className="discover-header"> <View className="header-item"> <View className="title">长度测试发布动态图文额文字发长度测试发布动态图文额文字发</View> <View className="tags"> <Text className="tags-item">标签1</Text> <Text className="tags-item">标签长度2</Text> </View> </View> <View className="header-item"> <View className="subtitle">321344元/m²</View> <View className="describ"> <Text className="describ-text">樊城区</Text> <Text className="describ-text">华洋堂</Text> </View> </View> </View>
scss:
.discover-header { flex: 1; overflow: hidden; .header-item { display: flex; align-items: center; line-height: 50px; .title { flex: 1; margin-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; } .tags { max-width: 200px; overflow: hidden; white-space: nowrap; } .subtitle { margin-right: 20px; color: $search-actived; } .describ { font-size: $font-26; color: $text-color; .describ-text { margin-right: 10px; } } } }