關於css超出部分用隱藏，顯示省略號

廢話不多說，直接上代碼。

只顯示一行

<div class="line">
    <p>
        一般自己寫項目時， 一個接口URL 就可以了。但在實際項目開發中，一個項目可能會請求不同的服務器的url，這時，我們簡單的配置下訪問接口域名，然后不同域名的接口，直接換對象調用即可，這樣不管有多少個不同的接口，我們都可以很好的管理使用。
    </p>
</div>

<style>
.line{
    width: 400px;
}
.line p{
    line-height: 40px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
</style>

固定高度

方法一：

<div class="block">
    <p>
        在Vue 項目開發中，我們與接口打交道最多了，如何來優雅的使用Axios變得尤為重要了。 通常我們通過客戶端向后端發送請求來接收接口數據，然后將這些接口數據完美的呈現到網頁上。
    </p>
</div>

<style>
.block{
    width: 400px;
    height: 80px;
    position: relative;
    overflow: hidden;
}
.block p{
    line-height: 40px;
}
.block:after {
    content: "...";
    position: absolute;
    bottom: 12px;
    right: 0px;
    padding-left: 20px;
    background: -webkit-linear-gradient(right, transparent, #fff 50%);
    background: -o-linear-gradient(right, transparent, #fff 50%);
    background: -moz-linear-gradient(right, transparent, #fff 50%);
    background: linear-gradient(to right, transparent, #fff 50%);
}
</style>

方法二（推薦）：

<div class="block">
    <p>
        在Vue 項目開發中，我們與接口打交道最多了，如何來優雅的使用Axios變得尤為重要了。 通常我們通過客戶端向后端發送請求來接收接口數據，然后將這些接口數據完美的呈現到網頁上。
    </p>
</div>
<style>
.block{
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>