文字溢出处理之---------单行字体溢出显示省略号,多行字体溢出显示省略号

场景:

在实际的项目开发个过程中,有时候文本内容不能全部显示出来,会影响到页面的排版布局,这时就需要我们对文字做一个溢出处理。

效果如下:

示例效果图

代码如下:

/* 单行文字溢出显示省略号 */
.ellipsis_one{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 两行文字溢出显示省略号 */
.wrap_more_two{
    overflow: hidden;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */
    -webkit-line-clamp: 2;
}

/* 三行文字溢出显示省略号 */
.wrap_more_three{
    overflow: hidden;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */
    -webkit-line-clamp: 3;
}

示例页面 HTML:

<body>
    <ul>
        <li><h4>单行文字溢出处理</h4>
            <p class="ellipsis_one">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
        </li>
        <li><h4>多行文字溢出处理之 两行文字溢出</h4>
            <p class="wrap_more_two">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
        <li><h4>多行文字溢出处理之 三行文字溢出</h4>
            <p class="wrap_more_three">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
    </ul>
</body>

以上就可以满足现今项目中的全部需求,希望可以帮到你。

 

发布了42 篇原创文章 · 获赞 2 · 访问量 4506
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览