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

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

内容简介:由 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 :當 寬度不足 擷取文字時,會自動加上

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

查看所有标签

猜你喜欢:

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

亚马逊跨境电商运营宝典

亚马逊跨境电商运营宝典

老魏 / 电子工业出版社 / 2018-6 / 69

《亚马逊跨境电商运营宝典》详细讲解亚马逊的平台知识和运营技巧,内容围绕亚马逊卖家的日常工作,系统讲解亚马逊账号注册、后台操作、选品、产品发布、Listing 优化、站内广告、FBA 发货、VAT 税务等内容,并且通过大量的案例分析,用生动翔实的案例为读者传递运营中必备的操作技巧和运营方法。 《亚马逊跨境电商运营宝典》内容针对性强,讲解的知识、技巧和方法都充分考虑到易学、易懂、易操作、易落地执......一起来看看 《亚马逊跨境电商运营宝典》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具