Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

CSS 布局 - 文本截断

2019-07-18

描述

如果文本的长度大于一行,那么他将在第 n 行被一个渐变的效果截断。

HTML

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

CSS

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Demo

说明

  1. overflow: hidden 可以阻止文本溢出他的范围(对于一个块元素来说,宽度为 100%,高度为 auto)
  2. white-space: nowrap 阻止文本超过一行的高度
  3. text-overflow: ellipsis 如果文本超过了自身设定的范围,将在末尾处使用省略号
  4. width: 200px; 确保元素有一个宽度范围,以便知道在什么位置使用省略号

浏览器支持

支持率:99.8%
支持情况:https://caniuse.com/#feat=text-overflow
⚠️:仅对单行元素生效,多行可使用

.line-clamp {
  word-break: break-all;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步