文本单行省略 和多行省略的样式

1 关于文本单行省略 和多行省略的样式

/* ============================
  1. 单行文本溢出显示省略号
  作用：文字超出一行时，自动隐藏并显示 ...
============================ */
.text-ellipsis {
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 强制不换行，保持一行 */
  text-overflow: ellipsis; /* 溢出的文字显示省略号... */
}

/* ============================
  2. 两行文本溢出显示省略号
  作用：文字超出两行时，自动隐藏并显示 ...
============================ */
.text-ellipsis-2 {
  overflow: hidden; /* 超出容器的内容隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号... */
  display: -webkit-box; /* 必须加，开启弹性盒子模型 */
  -webkit-line-clamp: 2; /* 限制显示 2 行文字 */
  -webkit-box-orient: vertical; /* 从上到下垂直排列 */
  word-break: break-all; /* 强制长英文、长数字自动换行，不撑破盒子 */
}

/* ============================
  3. 三行文本溢出显示省略号
  用法同上，仅修改行数即可
============================ */
.text-ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示 3 行 */
  -webkit-box-orient: vertical;
  word-break: break-all;
}

2 一些其它的基本常用样式

/* ============================
  2. 布局居中（最常用！）
============================ */
/* 水平垂直居中（flex 版） */
.flex-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
/* 仅水平居中 */
.flex-justify-center {
  display: flex;
  justify-content: center;
}
/* 仅垂直居中 */
.flex-align-center {
  display: flex;
  align-items: center;
}
/* 左右分布（一个左一个右） */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================
  3. 文字样式
============================ */
/* 文字居中 */
.text-center {
  text-align: center;
}
/* 文字居右 */
.text-right {
  text-align: right;
}
/* 文字加粗 */
.text-bold {
  font-weight: bold;
}
/* 文字不换行 */
.text-nowrap {
  white-space: nowrap;
}

/* ============================
  4. 浮动 / 清除浮动
============================ */
/* 左浮动 */
.float-left {
  float: left;
}
/* 右浮动 */
.float-right {
  float: right;
}
/* 清除浮动（解决高度塌陷） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

/* ============================
  5. 显示 / 隐藏
============================ */
/* 隐藏（不占位置） */
.hidden {
  display: none;
}
/* 隐藏（占位置） */
.invisible {
  visibility: hidden;
}
/* 显示块级元素 */
.block {
  display: block;
}
/* 行内块元素 */
.inline-block {
  display: inline-block;
}

/* ============================
  6. 圆角（必用）
============================ */
/* 小圆角 */
.radius-8 {
  border-radius: 8rpx;
}
/* 大圆角 */
.radius-16 {
  border-radius: 16rpx;
}
/* 圆形（宽高一致） */
.radius-circle {
  border-radius: 50%;
}

/* ============================
  7. 鼠标手势
============================ */
/* 小手（可点击） */
.cursor-pointer {
  cursor: pointer;
}
/* 禁止点击 */
.cursor-not-allowed {
  cursor: not-allowed;
}

/* ============================
  8. 图片样式
============================ */
/* 图片自适应容器 */
.img-fit {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪 */
}