一對一平臺製作，如何實現文字超出顯示為省略號？

云豹科技-苏凌霄發表於2024-06-15

一對一平臺製作，如何實現文字超出顯示為省略號？
① 第一步： 溢位隱藏 —— overflow: hidden;
② 第二步：用省略號來代表未顯示完的文字 ——text-overflow: ellipsis;
③ 第三步：必須設定盒子屬性為-webkit-box——display: -webkit-box;
④ 第四步：在一對一平臺製作中，設定超出幾行後，超出部分顯示省略號，比如-webkit-line-clamp：2；，則表示超出2行的部分顯示省略號，如果設定為3，那麼就是超出3行部分顯示省略號
⑤ 第五步：單詞破壞：主要用於破壞英文單詞的整體性，即在英文單詞還沒有在一行完全展示時就換行，簡單的理解就是一個單詞可能會被分成兩行展示——word-break: break-all;
⑥ 第六步：在一對一平臺製作中，盒子實現多行顯示的必要條件，文字垂直展示——-webkit-box-orient: vertical;

單行文字

<style>
 .box {
     width: 400px;
     height: 30px;

     /*第一步： 溢位隱藏 */
     overflow: hidden;
     /* 第二步：讓文字不會換行， 在同一行繼續 */
     white-space: nowrap;
     /* 第三步：用省略號來代表未顯示完的文字 */
     text-overflow: ellipsis;
  }
</style>

多行文字

 <style>
  .box {
     /* 限定範圍 */
     width: 300px;
     height: 40px;
 
     /* 1.溢位隱藏 */
     overflow: hidden;
     /* 2.用省略號來代替超出文字 */
     text-overflow: ellipsis;
     /* 3.設定盒子屬性為-webkit-box  必須的 */
     display: -webkit-box;
     /* 4.-webkit-line-clamp 設定為2，表示超出2行的部分顯示省略號，如果設定為3，那麼就是超出3行部分顯示省略號 */
     -webkit-line-clamp: 2;
     /* 5.字面意思：單詞破壞：破壞英文單詞的整體性，在英文單詞還沒有在一行完全展示時就換行  即一個單詞可能會被分成兩行展示 */
     word-break: break-all;
     /* 6.盒子實現多行顯示的必要條件，文字是垂直展示，即文字是多行展示的情況下使用 */
     -webkit-box-orient: vertical;
  }
</style>

以上就是一對一平臺製作，如何實現文字超出顯示為省略號？， 更多內容歡迎關注之後的文章

相關文章