css样式问题集合

1、图片在指定大小容器中按图片短边等比缩放

img {
  width: 100%; /* 设置图片宽度 */
  height: 100%; /* 设置图片高度 */
  object-fit: contain; /* 按短边缩放 */
  object-position: center center; /* 居中显示 */
}

2、超出部分隐藏并展示省略号

.text-hidden {
  max-width: 300px; /* 容器最大宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 不换行 */
}

.text-rows-hidden {
  max-width: 300px; /* 容器宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  display: -webkit-box; /* 设置布局方式 */
  -webkit-line-clamp: 2; /* 最大行数 */
  -webkit-box-orient: vertical; /* 设置垂直排列 */
}