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;
                                }
                            }
                        }
                    }

 

posted @ 2021-01-16 11:12  Nyan  阅读(347)  评论(0编辑  收藏  举报