如何自動依寬度為 String 加上 ... ?

由 API 所回傳的資料可能過長而換行顯示，但有時我們不希望換行影響版面，而想直接在該行截斷 String 加上 ... 即可，當然可以使用 JavaScript 處理，但隨著 RWD 寬度改變，JavaScript 將面臨挑戰，比較好的方式是直接使用 CSS 解決。

Version

WebStorm 2019.1.3

Safari 12.1.1

CSS 3

Safari

文字過長而造成換行顯示。

但有時候我們希望只顯示一行，過長的 string 自動截斷，並加上 ... 。

RWD

儘管 RWD 寬度改變也適用。

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="general text-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque deleniti doloribus ipsam labore magni quidem vero. Aut blanditiis dignissimos expedita in, labore mollitia nemo pariatur ratione. Dolores dolorum, quod?
  </div>
</body>
</html>

<div> 內的文字很長，browser 預設會換行顯示，加上 text-ellipsis class 使其只顯示一行，並加上 ... 。

CSS

style.css

.general {
  font-size: 30px;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• white-space: nowrap ：當 寬度不足 時也不會換行顯示，確保只顯示一行
• over-flow: hidden ：當 寬度不足 時，內容將自動隱藏
• text-overflow: ellipsis ：當 寬度不足 擷取文字時，會自動加上 …