單行文字：

我們看一下如下效果

這種情況隨處可見，實現起來也很簡單。

  <p>
      友情，能夠隨時說話找一個能隨時隨地和你聊天的人真的很難。
  </p>

p{
      width:10em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

white-space:規定段落中的文字不進行換行

text-overflow 屬性規定當文字溢位包含元素時發生的事情。

clip           修剪文字。
ellipsis顯示省略符號來代表被修剪的文字。
string使用給定的字串來代表被修剪的文字。

多行文字：

我們看一下如下效果

僅通過css實現的話有倆個方法

方法一

    div {
      width:500px;
      display:-webkit-box;
      overflow:hidden;
      text-overflow:ellipsis;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
    }

  <div>
    友情，能夠隨時說話找一個能隨時隨地和你聊天的人真的很難。當你某一刻想傾訴時，翻遍所有通訊錄，也沒那麼簡單，就能找到聊得來的那個人。
    或許你人緣不錯，與你認識的人很多，和你關係不錯的人也很多，但即使是你朝夕相處的家人，甚或是親密無間的愛人，你也未必見得想什麼時候說就能和他說，想說什麼就說什麼，什麼時候都不必擔心失禮，不必自責，不必畏懼被冷淡和被斥責。
    電視劇《康熙王朝》裡，康熙擁有後宮粉黛三千，他最愛的人是容妃。他到容妃那裡，最愛說的話就是：“朕想和你說說話。”然後，把一些國事家事傾訴一番。
    你乾的事情再偉大，再轟轟烈烈，你也是一個人，一個有七情六慾的平凡人，也希望有一個貼心貼肺、知冷知熱、能深刻理解你的思想與情感的人在身邊，跟你交流、溝通。
    能夠說說話而已，細細想來，也就如此。
  </div>
 

這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器。有些相容性問題。

方法二：

    div {
      width: 500px;
      border:1px solid ;
      line-height: 1.5em;
      height: 4.5em;
      overflow: hidden;
      position: relative;
    }
    div:after {
      content: "...";
      font-weight: 900;
      color: black;
      display: inline-block;
      position: absolute;
      right: 0;
      top:3em;
      height: 1.5em;
      width: 100%;
      text-align: right;
    }
 

div內文字不變。

這裡我們需要注意，我們必須知道你要求的行數，最後一行末尾加...，在css上體現為height=k*line-height.我們把div的偽元素的內容變成..然後定位到結尾，具體實現看一下就明白了。