单行

使用text-overflow：ellipsis属性
text-overflow: clip|ellipsis|string;
clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

<div class="divClass">单行文本超出部分显示省略号我是开始了</div>
 .divClass{
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;/* 超出部分显示省略号 */
        white-space: nowrap;/*规定段落中的文本不进行换行 */
        width: 240px;/*需要配合宽度来使用*/
        border: 1px solid red;
        font-size: 30px;
    }

多行显示...

 <div class="MyDivClass">
            超出多行显示，超出多行显示，超出多行显示，超出多行显示，超出多行显示，
             超出多行显示，超出多行显示，超出多行显示，超出多行显示，超出多行显示    
 </div>

 .MyDivClass{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 250px;
        border: 1px solid red;
        //font-size: 20px;
    }
    .MyDivClass{
        posingfation: relative;
        line-height: 20px;
        max-height: 80px;
        overflow: hidden;
        width: 240px;
        border: 1px solid red;
    }
    .MyDivClass::after{
        content: "...";
        position: absolute;
        bottom: 0;
        right: 7px;
        padding-right: 124px;
        background: -webkit-linear-gradient(left, transparent, #fff 0%);
        background: -o-linear-gradient(right, transparent, #fff 0%);
        background: -moz-linear-gradient(right, transparent, #fff 0%);
        background: linear-gradient(to right, transparent, #fff 0%);
    }