简述如何实现单行/多行文本溢出的省略样式 ?

单行文本溢出的省略样式可以通过以下CSS样式来实现:

.text {
  white-space: nowrap;  /* 保持文本在一行 */
  overflow: hidden;     /* 隐藏超出元素尺寸的内容 */
  text-overflow: ellipsis; /* 将溢出的文本显示为省略号 */
  width: 200px;         /* 设置元素的宽度 */
}

这将使得在.text类的元素中,如果文本内容超过了元素的宽度,超出的部分将被隐藏,并显示为省略号。

多行文本的溢出省略,我们可以使用-webkit-line-clamp属性,但需要注意的是这个属性目前只在部分浏览器中支持:

.text {
  display: -webkit-box;  /* 将对象作为弹性盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索弹性盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;     /* 隐藏超出元素尺寸的内容 */
  width: 200px;         /* 设置元素的宽度 */
}

这将使得在.text类的元素中,如果文本内容超过了元素的高度,超出的部分将被隐藏,并且最后一行显示为省略号。这里的-webkit-line-clamp: 2;表示最多显示两行。

举个例子,在商品展示页面,商品的名称可能会非常长,但是我们希望无论名称有多长,都只显示一行或者两行,并且超出的部分用省略号表示,这时候就可以使用上述CSS样式。

发表评论

后才能评论