CSS 效果

超出文字省略

css

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

p {
	overflow: hidden; /* 溢出部分隐藏 */
	text-overflow: ellipsis; /* 超出部分省略号表示 */
	white-space: nowrap; /* 防止文本换行 */

	/* 没有注释的 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

超过两行文字省略

注意

这是一个非标属性，兼容性不太好

css

p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	/* 重点 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* 设置需要的行数 */
	-webkit-line-clamp: 2;

	/* 没有注释的 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

超出文字省略前面部分

css

p {
	/* 正常设置隐藏 */
	overflow: hidden; /* 溢出部分隐藏 */
	text-overflow: ellipsis; /* 超出部分省略号表示 */
	white-space: nowrap; /* 防止文本换行 */
	/* 然后设置让文本从右到左显示 */
	direction: rtl;
	unicode-bidi: bidi-override;

	/* 没有注释的 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: rtl;
	unicode-bidi: bidi-override;
}

最后使用 js 颠倒文字原本的顺序，并显示颠倒后的结果即可：

const str = 'hello world！';
const result = str.split('').reverse().join('');

源文本：Aliquip est nulla ex ullamco velit ad irure.

省略前面的：.eruri da tilev ocmallu xe allun tse piuqilA

注意

这样虽然实现了超出文字省略前面部分，但是也存在一个问题，复制文字时，复制的是颠倒后的文字，而不是原本的文字。

解决办法：监控复制 (copy) 事件，将复制的内容还原为原本的文字。演示如下

可在控制台查看输出

未加反转：.eruri da tilev ocmallu xe allun tse piuqilA

加了反转：.eruri da tilev ocmallu xe allun tse piuqilA

实现代码：

document.addEventListener('copy', (e) => {
	// 判断目标元素是否包含 data-reverse-copy-text 属性，从而判断是否需要执行反转操作
	if (e.target && e.target.hasAttribute('data-reverse-copy-text')) {
		// 是否复制成功
		if (e.clipboardData) {
			// 获取需要复制的内容
			let text = window.getSelection().toString();
			if (text) {
				console.log('反转前：' + text);
				// 如果文本存在，则取消默认行为
				e.preventDefault();
				// 反转文本
				text = text.split('').reverse().join('');
				console.log('反转后：' + text);
				// 放入剪贴板
				e.clipboardData.setData('text/plain', text);
			}
		}
	}
});

平滑滚动

css

/* 根元素 */
html {
	scroll-behavior: smooth;
}
/* 指定元素 */
.scroll-container {
	scroll-behavior: smooth;
}

这种方式非常适合在使用锚点链接来滚动的页面上

平滑滚动 DEMO

在新页面打开

scroll-behavior 属性 MDN

设置文字不可选中

css

.un-selectable {
	user-select: none;
}

这行文字不能选中

内容适应宽度

css

.fit-width {
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}

html

<div class="fit-width">这行文字会根据内容自动适应宽度</div>

这行文字会根据内容自动适应宽度

透明网格背景

css

.grid-bg {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

顶部安全距离

css

.container {
  padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
  padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */

  /* 在安全距离基础上增加额外间距 */
  padding-top: calc(constant(safe-area-inset-top) + 20px);
  padding-top: calc(env(safe-area-inset-top) + 20px);
}

底部安全距离

css

.container {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

  /* 在安全距离基础上增加额外间距 */
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}

Grid 自适应列布局

css

.container {
  /* auto-fill：有固定列宽，空间不够时自动换行，剩余空间保留空轨道 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* auto-fit：与 auto-fill 类似，但剩余空间会被已有列拉伸占满，不留空轨道 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

强制换行

css

.p {
  white-space: pre-wrap;
  word-break: break-all;
}

移动端字体缩放

text-size-adjust - CSS：层叠样式表 | MDN

css

p {
  text-size-adjust: 150%;
  -webkit-text-size-adjust: 150%;
}

渐变文字

css

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

这是一段渐变文字

首字下沉

css

p::first-letter {
  float: left;
  font-size: 3em;
  font-weight: bold;
  line-height: 1;
  margin-right: 8px;
  color: #e74c3c;
}

首字下沉效果常用于文章或杂志风格的排版中，让段落的第一个字显得更加突出，增强视觉吸引力。

选中文本样式

css

::selection {
  background-color: #667eea;
  color: #fff;
}

/* 兼容 Firefox */
::-moz-selection {
  background-color: #667eea;
  color: #fff;
}

选中这段文字试试，会看到自定义的选中颜色。

空状态占位

css

/* 当元素内容为空时显示占位提示 */
.empty-placeholder:empty::after {
  content: '暂无数据';
  color: #999;
}

html

<div class="empty-placeholder"></div>

该元素有内容，所以不显示占位

毛玻璃效果

css

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

毛玻璃效果

自定义滚动条

css

/* 自定义滚动条整体 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

第 1 行内容 — 滚动条已美化

第 2 行内容 — 滚动条已美化

第 3 行内容 — 滚动条已美化

第 4 行内容 — 滚动条已美化

第 5 行内容 — 滚动条已美化

渐变边框

css

.gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

/* 或者使用 background-clip 方式（推荐，支持 border-radius） */
.gradient-border-v2 {
  position: relative;
  background: #fff;
  border-radius: 8px;
}
.gradient-border-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

渐变边框

固定宽高比

css

/* 现代写法 */
.aspect-ratio-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #667eea;
}

/* 兼容老浏览器的 padding-top 方式 */
.aspect-ratio-box-fallback {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 56.25% */
}
.aspect-ratio-box-fallback > .content {
  position: absolute;
  inset: 0;
}

16 : 9

居中大全

css

/* Flexbox 居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid 居中 */
.grid-center {
  display: grid;
  place-items: center;
}

/* Absolute + Transform 居中 */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Absolute + margin 居中（需已知宽高） */
.absolute-margin-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 行内/文字水平居中 */
.text-center {
  text-align: center;
}

flex 居中

grid 居中

粘性定位

css

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

吸顶标题

列表项 1

列表项 2

列表项 3

列表项 4

列表项 5

列表项 6

css

/* 内容不够时 footer 固定在底部 */
html, body {
  height: 100%;
  margin: 0;
}
.page-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.page-content {
  flex: 1;
}

html

<div class="page-wrap">
  <main class="page-content">页面内容</main>
  <footer>页脚 — 内容少时固定在底部</footer>
</div>

图片居中裁切

css

/* 覆盖模式：铺满容器，裁切超出部分 */
.img-cover {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* 包含模式：完整显示图片，留白 */
.img-contain {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

/* 调整焦点位置（从顶部对齐） */
.img-cover-top {
  object-fit: cover;
  object-position: top;
}

cover

contain

暗色模式适配

css

/* 系统暗色模式下自动切换样式 */
:root {
  --bg: #fff;
  --text: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --text: #eee;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

焦点可见样式

css

/* 鼠标点击时不显示焦点框，键盘 Tab 导航时显示 */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

试试用鼠标点击 vs 用 Tab 键切换焦点

修改输入光标颜色

css

/* 修改输入框光标颜色 */
input {
  caret-color: #667eea;
}

/* 修改鼠标指针样式 */
.pointer {
  cursor: pointer;
}
.not-allowed {
  cursor: not-allowed;
}
.grab {
  cursor: grab;
}

pointernot-allowedgrab

骨架屏 Loading

css

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

CSS 效果 ​

超出文字省略 ​

超过两行文字省略 ​

超出文字省略前面部分 ​

平滑滚动 ​

设置文字不可选中 ​

内容适应宽度 ​

透明网格背景 ​

顶部安全距离 ​

底部安全距离 ​

Grid 自适应列布局 ​

强制换行 ​

移动端字体缩放 ​

渐变文字 ​

首字下沉 ​

选中文本样式 ​

空状态占位 ​

毛玻璃效果 ​

自定义滚动条 ​

渐变边框 ​

固定宽高比 ​

居中大全 ​

粘性定位 ​

粘性 Footer ​

图片居中裁切 ​

暗色模式适配 ​

焦点可见样式 ​

修改输入光标颜色 ​

骨架屏 Loading ​

CSS 效果

超出文字省略

超过两行文字省略

超出文字省略前面部分

平滑滚动

设置文字不可选中

内容适应宽度

透明网格背景

顶部安全距离

底部安全距离

Grid 自适应列布局

强制换行

移动端字体缩放

渐变文字

首字下沉

选中文本样式

空状态占位

毛玻璃效果

自定义滚动条

渐变边框

固定宽高比

居中大全

粘性定位

粘性 Footer

图片居中裁切

暗色模式适配

焦点可见样式

修改输入光标颜色

骨架屏 Loading