内容简介:由 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 加上右键菜单
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MFC编程技巧与范例详解
曾凡锋、苗雨 / 清华大学出版社 / 2008-10 / 45.00元
本书集作者多年教学与软件开发经验,通过不同类型的实例详解向读者解读了如何使用MFC进行软件开发,并按实例的复杂度进行分级介绍,以满足不同层次读者的切实需要。. 本书共55个完整实例,均选自作者多年工程应用开发中的案例;内容共分14章,分别为MFC的基本概念、文档和视图、对话框、按钮控件、编辑控件、组合框控件、列表框控件、列表视图控件、树状视图控件、图像、多媒体、GDI与GDI+、网络编程、I......一起来看看 《MFC编程技巧与范例详解》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
Base64 编码/解码
Base64 编码/解码