css小技巧：单行省略和多行省略

在日常学习中我们接触最多就是单行省略，文本超出一行之后使用省略号，那么当公司ui图上有这么一个需求：第一行正常展示，文本超出两行之后才使用省略号，那么该怎么写呢，接下来看代码，注意使用到的css样式——
单行文本超出省略：

<style>
    .oneline{
        border: 1px solid red;
        background-color: skyblue;
        /* 固定最大宽度 */
        max-width:200px;
        /* 不换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 文本超出时，显示省略标记 */
        text-overflow: ellipsis;
    }
</style>

<div class="oneline">这是第一行超出文本宽度省略的内容</div>

多行文本超出省略：（代码中的备注也很重要）

<style>
    .moreline{
        border: 1px solid red;
        background-color: skyblue;
        max-width:200px;
        /* 超出部分隐藏 */
        overflow:hidden;
        /* 文本超出时，显示省略标记 */
        text-overflow:ellipsis;
        /* 弹性伸缩盒子模型 */
        display:-webkit-box;
        /* 子元素呈现3行 */
        -webkit-line-clamp:3;
        /* 子元素排列方式为垂直 */
        -webkit-box-orient:vertical;  
        /*
            备注：注意这两个属性是搭配使用的，同时留意浏览器是否支持
            //Firefox 
            display:-moz-box;
            -moz-box-orient:horizontal;
            //Safari, Opera, and Chrome
            display:-webkit-box;
            -webkit-box-orient:horizontal;
        */
    }
</style>

<div class="moreline">这是更多行超出文本宽度省略的内容；这是更多行超出文本宽度省略的内容；这是更多行超出文本宽度省略的内容；这是更多行超出文本宽度省略的内容</div>

css小技巧：单行省略和多行省略

猜你喜欢