css怎樣讓HTML中超出的內容顯示為省略號

文字超出了需要隱藏並顯示省略號這個在工作中很多時候都要用到，我想很多人都碰到過吧，這個有兩種解決方法
第一種、用程序來截取字符長度，這個其實也是可以的。
第二種就是接下來分享的內容，用css樣式來做,話也不多說，直接上代碼吧：
HTML：

<div class="css1">Web前端開發 – 專注於網站前端設計與Web用戶體驗</div>
<div class="css2">Web前端開發 – 專注於網站前端設計與Web用戶體驗</div>
<div class="css3">Web前端開發 – 專注於網站前端設計與Web用戶體驗</div>

css：

.css1{
     color:#6699ff;
     border:1px solid #ff8000;
     margin-bottom:20px;
     width: 20em;/*不允許出現半漢字截斷*/
 }
 .css2{
     overflow: hidden; /*自動隱藏文字*/
     text-overflow: ellipsis;/*文字隱藏后添加省略號*/
     white-space: nowrap;/*強制不換行*/
     width: 10em;/*不允許出現半漢字截斷*/
     color:#6699ff;
     border:1px solid red;
 }

p{
    width: 100%;
    word-break: break-all;/*word-break: normal|break-all|keep-all;在恰當的斷字點進行換行,break-all 允許在單詞內換行,keep-all 只能在半角空格或連字符處換行,normal 使用瀏覽器默認的換行規則。*/
    text-overflow: ellipsis;/*溢出文字顯示省略號*/
    display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
    -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 顯示的行數 **/
    overflow: hidden;  /** 隱藏超出的內容 **/
}

OK！謝謝閱讀！！！