doc: update docs/css.md

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>
+```
+
 另见
 ---------