内容简介：由 API 所回傳的資料可能過長而換行顯示，但有時我們不希望換行影響版面，而想直接在該行截斷 String 加上WebStorm 2019.1.3Safari 12.1.1
由 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 ：當
寬度不足擷取文字時，會自動加上…
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 给Elasticsearch加上监控
- 给树莓派小车控制系统加上装甲
- 如何用捷径给 GIF 加上进度条
- 是否有可能，为AI加上安全锁？
- Python 如何给屏幕打印信息加上颜色
- Cocoa：给 NSTableView 加上右键菜单
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。