[分享]css3截取

CSS3截取是CSS3的一个很常用的特性，用来对文本或者图片进行裁剪，常用于一些特殊的需求场景，如以下示例：/ 文字裁剪 / .textclip { display: inlineblock; wid...

CSS3截取是CSS3的一个很常用的特性，用来对文本或者图片进行裁剪，常用于一些特殊的需求场景，如以下示例：

/* 文字裁剪 */
.text-clip {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图片裁剪 */
.image-clip {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.image-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

上述代码中，我们通过设置white-space属性为nowrap，使文本不进行换行，然后通过overflow:hidden将超出容器的部分进行隐藏，最后通过text-overflow:ellipsis将超出部分使用省略号代替。

对于图片裁剪，我们通过设置容器的宽高和overflow:hidden来实现对图片的裁剪，然后给img元素设置object-fit:cover，使图片按比例填充整个容器，超出部分进行裁剪。