CSS实现单行、多行文本溢出显示省略号的方法

<code class="hljs xml"></code><p><span style="color:#009a61">//单行</span></p><p>.single-line{</p><p>   width:200px;</p><p>   overflow:hidden;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>   white-space:nowrap;  </p><p>   text-overflow:ellipsis;<br/></p><p>}</p><p><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"single-line"</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></p><p><span style="color:#009a61">//多行</span></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1817">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6cb8b7ef86975.png" alt="行者AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1817">行者AI</a>
                            <p>行者AI绘图创作，唤醒新的灵感，创造更多可能</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="行者AI">
                                <span>100</span>
                            </div>
                        </div>
                        <a href="/ai/1817" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="行者AI">
                        </a>
                    </div>
                <p>.multiple-line{   </p><p>  width:200px;   </p><p>  display:-webkit-box;   </p><p>  -webkit-box-orient:vertical;   </p><p>  -webkit-line-clamp:2;   </p><p>  overflow:hidden;   </p><p>}<br/></p>