内容简介：由 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 加上右键菜单
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Probability and Computing
Michael Mitzenmacher、Eli Upfal / Cambridge University Press / 2005-01-31 / USD 66.00
Assuming only an elementary background in discrete mathematics, this textbook is an excellent introduction to the probabilistic techniques and paradigms used in the development of probabilistic algori......一起来看看 《Probability and Computing》 这本书的介绍吧!
