單行文本超出或多行文本超出顯示省略號...

單行文本超出隱藏

css樣式中必須同時設置：
white-space: nowrap; //不換行
text-overflow: ellipsis;
overflow: hidden;

    <h3>單行文本超出隱藏</h3>
    <div class="single">
        This is a sad story. Tell me your name and address.
    </div>

   .single{
       width: 200px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       border: 1px solid black;
   }

演示：

多行文本超出隱藏

這裏以3行爲例做演示：

css樣式中必須同時設置：
display: -webkit-box;
-webkit-line-clamp: 3; //設置顯示3行
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

    <h3>多行文本超出隱藏</h3>
    <div class="multiple">
        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
    </div>

    .multiple{
        display: -webkit-box;
        -webkit-line-clamp: 3;              
        -webkit-box-orient: vertical;
        width: 300px;
        height: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid black;
        line-height: 30px;
        padding: 0 10px;
    }

演示：