zoukankan      html  css  js  c++  java
  • 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;
                                    }
                                }
                            }
                        }
  • 相关阅读:
    java文件压缩与解压
    常见Java库漏洞汇总
    ref:Spring JDBC框架
    ref:web 防止SQL注入方法
    ref:spring配置数据库方式
    ref:web security最新学习资料收集
    Hack12306
    mysql copy data from table to another
    MYSQL
    tcpdump 抓包过滤
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14285277.html
Copyright © 2011-2022 走看看