From 56569c813adb0c98f3f67fac8d1e5b3dbb1e7d3c Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 28 May 2023 23:01:04 +0800
Subject: [PATCH] doc: update docs/css.md

---
 docs/css.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/docs/css.md b/docs/css.md
index 81e7a67..25769db 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -1921,6 +1921,42 @@ ul > li:not(:last-child)::after {
 
 使列表项看起来像一个真实的逗号分隔列表，使用 `:not()` 伪类，最后一项不会添加逗号
 
+### 图片对齐不变形
+
+```css
+img {
+  width: 200px;
+  height: 200px;
+  /** 确保图片按原始宽高比例进行缩放 */
+  object-fit: cover;
+  object-position: left top;
+  transition: 1s;
+}
+img:hover {
+  /** 指定图片显示的位置，结合鼠标移动+过渡动画 */
+  object-position: right bottom;
+}
+```
+
+### 多行截断，展示省略号
+
+```css
+.clamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+```
+
+`html` 文本超过 3 行将被截断，显示省略号...
+
+```html
+<p class="clamp">
+  展示多行文本，超过 3 行将被截断，显示省略号...
+</p>
+```
+
 另见
 ---------