类.circle.three的span元素overflow-x:hidden不生效问题求助

1. overflow属性作用逻辑错误：overflow: hidden用于控制元素内部内容超出自身边界时的展示行为，你需要隐藏的是.circle.three作为子元素超出父容器.landing-page的部分，该属性需要加在父容器.landing-page上，而非子元素本身。你当前给空span子元素加overflow，没有任何可隐藏的内部内容，自然不会生效。
2. 样式优先级与规则冲突：.circle类已为该元素配置了position: absolute，绝对定位元素会自动忽略display: inline-block配置，你给#three-overflow设置的display属性本身就不会生效。
3. 属性使用场景不符：你配置的white-space: nowrap、text-overflow: ellipsis均为文本内容溢出的专属处理规则，该元素无任何文本内容，两行配置完全无效。

直接修改父容器.landing-page的样式，新增overflow-x: hidden规则即可：

.landing-page {
  height: 100vh;
  width: auto;
  position: relative;
  background-color: #32322C;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: rgb(203, 243, 241);
  z-index: 1;
  min-height: 500px;
  display: flex;
  flex-flow: row nowrap;
  /* 新增以下规则 */
  overflow-x: hidden;
}

修复后可删除#three-overflow对应的所有CSS规则，无任何作用。

• 无内容的装饰性定位元素建议使用div标签，更符合标签语义规范。
• 页面中两个跳转链接使用了重复的idprofile-link，id在单页面内必须唯一，建议修改为class属性避免后续选择器、JS操作出现异常。
• .circle.three的60em尺寸建议替换为vw/vh视窗单位，em会继承父级字体大小变化，不同设备下圆的尺寸偏差会远大于预期，不利于响应式适配。

内容的提问来源于stack exchange，提问作者Zack Moberg