文本溢出省略号显示

最新推荐文章于 2024-04-28 01:25:06 发布

weixin_45754783

最新推荐文章于 2024-04-28 01:25:06 发布

阅读量26

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45754783/article/details/130170542

版权

在这里插入图片描述

<div class="sing-line" style="
        border:2px solid #ccc;
        width:200px;
        height:30px;
        line-height: 30px;
        margin-bottom: 90px;
        color: #f40;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;">
        单行文本溢出处理  white-space:nowrap不要换行，overflow：hidden溢出隐藏，text-overflow：ellipsis省略号
    </div>

多行文本溢出
    <div class="multi-line" style="
    border:2px solid #ccc;
    width: 200px;
    height:150px;
    line-height:30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;">VueJs作为国人开发的一款前端框架，不仅有强大的社区支持，很多API都是中文的，学习难度相对小；
近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，用户的体验也越来越
大，功能越来越复杂，交互也越来越酷炫；</div>