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

栏目: CSS · 发布时间: 6年前

内容简介:由 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 加上 ... ?

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

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

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

RWD

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

儘管 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 :當 寬度不足 擷取文字時,會自動加上

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

MFC编程技巧与范例详解

MFC编程技巧与范例详解

曾凡锋、苗雨 / 清华大学出版社 / 2008-10 / 45.00元

本书集作者多年教学与软件开发经验,通过不同类型的实例详解向读者解读了如何使用MFC进行软件开发,并按实例的复杂度进行分级介绍,以满足不同层次读者的切实需要。. 本书共55个完整实例,均选自作者多年工程应用开发中的案例;内容共分14章,分别为MFC的基本概念、文档和视图、对话框、按钮控件、编辑控件、组合框控件、列表框控件、列表视图控件、树状视图控件、图像、多媒体、GDI与GDI+、网络编程、I......一起来看看 《MFC编程技巧与范例详解》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码