CSS tips: single-line ellipsis and multi-line ellipsis

• In daily learning, we are most exposed to single-line ellipsis, and ellipsis is used after the text exceeds one line, so when there is such a requirement on the company's ui map: the first line is displayed normally, and the ellipsis is used after the text exceeds two lines, so how to write it? Next, look at the code and pay attention to the css style used——
• A single line of text beyond is omitted:

<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>

• Multiline text beyond omitted: (remarks in code are also important)

<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>