• 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;
                                    }
                                }
                            }
                        }
  • 相关阅读:
    构建之法(一)
    大二下周总结十四
    寒假学习报告03
    寒假学习报告02
    2019春季学期个人总结
    2019春学习进度报告(第十六周)
    计算英语最长单词连
    2019春学习进度报告(第十五周)
    用户体验评价
    2019春学习进度报告(第十四周)
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14285277.html
Copyright © 2020-2023  润新知