CSS实现列表各占一半文字溢出显示省略号

最新推荐文章于 2022-09-21 20:28:09 发布

前端小白菜_

最新推荐文章于 2022-09-21 20:28:09 发布

阅读量387

点赞数

分类专栏： css 文章标签： CSS 文字溢出省略号

本文链接：https://blog.csdn.net/Axiaoheng_/article/details/102833951

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css实现列表各占一半文字溢出显示省略号

文档仅供个人参考使用

<div class="box">
        <div>
            <p v-for="item in data" :key="item.id">
                <label>
                <input type="radio">{{item.name}}
                </label>
            </p>
        </div>
    </div>

    export default {
        data() {
            return {
                data:[
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"1"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"2"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"3"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"4"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"5"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"6"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"7"},
                    {"name":"哈哈哈哈哈测试测试测试哈哈哈哈哈测试测试测试",id:"8"}
                ]
            }
        },
    }

.box{
    
    height: 400px;
    border: 1px solid black;
    margin: 0 auto;
}
.box div{
    display: flex;
    line-height: 50px;
    flex-wrap:wrap;
}
.box div p{
   width: 50%;
}
p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}