CSS文本溢出省略
光影星宸 / 14 / 2023-09-11 15:56:46

单行文本溢出的CSS

.box1{
  width:200px; // 设置固定宽度,文本内容超过宽度才会出现省略效果
  white-space:nowrap; // 不允许换行
  overflow:hidden; // 隐藏溢出部分
  text-overflow:ellipsis; // 使用省略号代替溢出部分
}

多行文本溢的CSS

.item {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; // 垂直布局内容
  -webkit-line-clamp: 3; // 设置行数
  word-break: break-all; // 只要到达指定宽度,就强制拆分英文单词,使其换行
}

作者
光影星宸
许可协议
CC BY 4.0
发布于
2023-09-11
修改于
2023-09-29
Bonnie image
尚未登录