文本溢出

2023-05-23 22:32:07

单行文本溢出

三行代码基本就可以解决

div {
  width: 100px;
  height: 30px;
  /* 禁止换行 */
  white-space: nowrap;
  /* 超出的文本隐藏 */
  overflow: hidden;
  /* 文本隐藏样式为省略号 */
  text-overflow: ellipsis;
}

多行文本溢出

多行文本溢出要复杂一点点，首先要计算下每行的行高，比如我们这里容器高为150px，然后要我们显示5行，那么就是说一行的行高为30px，然后将盒子的显示类型改变为-webkit-box，因为webkit内核的浏览器是可以做到的，设定好显示的行数以及内容的排列方向

div {
  width: 200px;
  height: 150px;
  /* 单行行高 */
  line-height: 30px;
  /* 超出的文本隐藏 */
  overflow: hidden;
  /* 改变盒子类型 */
  display: -webkit-box;
  /* 显示的行数 */
  -webkit-line-clamp: 5;
  /* 排列方向 */
  -webkit-box-orient: vertical;
}