css如何处理溢出的内容? 使用"..."作为结尾?

Question

<section id="demo">
                <div class="box-container py-5">
                    
                    <style type="text/css">
                        #demo .content{
                            width: 300px;
                            border: 1px solid red;
                        }
                    </style>
                    
                    <div class="content">
                        TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST
                    </div>
                </div>
            </section>

现在的效果

希望得到的效果

Answer 1

1.当行省略号

 .content {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
 }

2.多行

.content {
     display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;/*设置超过为省略号的行数*/
    overflow:hidden;
    text-overflow:ellipsis;
 }