CSS のヒント: 単一行の省略記号と複数行の省略記号

• 日常の学習では、単一行の省略記号を最もよく目にしますが、省略記号はテキストが 1 行を超えた後に使用されます。そのため、会社の UI マップでそのような要件がある場合、最初の行は通常どおり表示され、省略記号が使用されます。テキストが 2 行を超えると、どのように記述すればよいでしょうか? 次に、コードを見て、使用されている CSS スタイルに注目してください—
• それ以降の 1 行のテキストは省略されます。

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