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

单行文本溢出的省略样式可以通过以下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样式。