技術標籤：csshtmlcsscss3less

單行省略

文字超出盒子大小時，會溢位自動換行

然而我們只想在一行上顯示，多餘部分變成省略號，需要如何處理呢？
css魔法師登場

設定一個長為100px的div

<div class="content">Do you like driving ?</div>

      .content {
        width: 100px;
        border: 1px solid #ccc;
      }

魔法師藥劑

1. overflow: hidden; // 超出部分隱藏
2. white-space: nowrap; // 禁止換行
3. text-overflow: ellipsis; // 省略號

完整css樣式

      .content {
        width: 100px;
        border: 1px solid #ccc;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

效果圖

多行省略

由於文字太多，把盒子撐大，影響佈局。

省略多餘部分，只展示指定的行數

css魔法師

      .content {
        width: 100px;
        border
 
: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

-webkit-line-clamp: x
指定需要顯示的行數