超过300rpx溢出隐藏省略号

当网页元素的内容超过其容器的宽度，并且设置了`overflow: hidden;`来隐藏超出部分时，如果内容中包含非文本元素（如图片或图标），可能会导致直接截断而看不到省略号的效果。为了避免这种情况，可以使用CSS的`ellipsis`属性结合相对单位`rem`（root em）。当内容宽度超过300rpx（根像素）时，可以设置`text-overflow: ellipsis;`来显示省略号。

例如：

.container {
  width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 确保行内元素不换行 */
}

这里的关键点是使用`rem`单位来确保在各种屏幕尺寸下都能保持一致的缩放效果，而不是固定的像素值。当内容长度超过300rpx时，省略号就会自动显示。