跨度不响应溢出-x：隐藏
Span not responding to overflow-x: hidden
我在隐藏 .circle.three 跨度溢出时遇到问题。它阻止我在响应能力和其他显示问题上前进。我已经尝试实施我能够遇到的每一个建议，但都没有成功。
.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;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #149279);
position: absolute;
}
.circle.three {
/* position: absolute; */
width: 60em;
height: 60em;
right: -25%;
z-index: 0;
}
#three-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
<header class="landing-page" id="welcome-section">
<div class="cover" onclick="closeNav();"></div>
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="closeNav()">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>
<div class="top_contacts">
<a href="https://github.com/ZMoberg" id="profile-link" class="top_contacts-link" target="_blank" alt="Github"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/zackmoberg/" id="profile-link" class="top_contacts-link" target="_blank" alt="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
<!--Navigation bar-->
<nav id="navbar" class="nav">
<ul class="nav-links">
<li class="nav-link"><a href="#about_scroll">ABOUT</a></li>
<li class="nav-link"><a href="#projects-scroll">PROJECTS</a></li>
<li class="nav-link"><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<span class="circle three" id="three-overflow"></span>
<section class="head_sub">
<h1 class="title">ZACK MOBERG</h1>
<p class="title_sub">Web Developer & UI/UX Designer</p>
<div class="header_nav">
<ul>
<li class="title_nav"><a href="#about_scroll" class="left">ABOUT</a></li>
<li class="title_nav"><a href="#projects-scroll" class="left">PROJECTS</a></li>
<li class="title_nav"><a href="#contact" class="left">CONTACT</a></li>
</ul>
</div>
</section>
<!-- Scroll down animation -->
<div class="mouse_scroll">
<a href="#about_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="scroll_arrows">
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</header>
这是一个 link 到 repo https://github.com/ZMoberg/portfolio
如果这是解决此问题的错误方法，我深表歉意，我想遵守正确的格式设置惯例，所以请随时告诉我。
此外，由于我仍在学习，我欢迎对整个项目的任何和所有反馈。
您的跨度没有响应 overflow-x: hidden，因为它没有溢出，因为它没有任何 child 元素。事实上，body 被跨度溢出了。
因此，您可以将 overflow-x: hidden 添加到 body，或者如果您不希望圆在 Y 轴上超出您的 header（主要是在较小的屏幕上），请添加overflow: hidden 到 header.
body {
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;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #149279);
position: absolute;
}
.circle.three {
/* position: absolute; */
width: 60em;
height: 60em;
right: -25%;
z-index: 0;
}
#three-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="landing-page" id="welcome-section">
<div class="cover" onclick="closeNav();"></div>
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="closeNav()">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>
<div class="top_contacts">
<a href="https://github.com/ZMoberg" id="profile-link" class="top_contacts-link" target="_blank"
alt="Github"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/zackmoberg/" id="profile-link" class="top_contacts-link"
target="_blank" alt="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
<!--Navigation bar-->
<nav id="navbar" class="nav">
<ul class="nav-links">
<li class="nav-link"><a href="#about_scroll">ABOUT</a></li>
<li class="nav-link"><a href="#projects-scroll">PROJECTS</a></li>
<li class="nav-link"><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<span class="circle three" id="three-overflow"></span>
<section class="head_sub">
<h1 class="title">ZACK MOBERG</h1>
<p class="title_sub">Web Developer & UI/UX Designer</p>
<div class="header_nav">
<ul>
<li class="title_nav"><a href="#about_scroll" class="left">ABOUT</a></li>
<li class="title_nav"><a href="#projects-scroll" class="left">PROJECTS</a></li>
<li class="title_nav"><a href="#contact" class="left">CONTACT</a></li>
</ul>
</div>
</section>
<!-- Scroll down animation -->
<div class="mouse_scroll">
<a href="#about_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="scroll_arrows">
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</header>
</body>
</html>
我在隐藏 .circle.three 跨度溢出时遇到问题。它阻止我在响应能力和其他显示问题上前进。我已经尝试实施我能够遇到的每一个建议，但都没有成功。
.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;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #149279);
position: absolute;
}
.circle.three {
/* position: absolute; */
width: 60em;
height: 60em;
right: -25%;
z-index: 0;
}
#three-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
<header class="landing-page" id="welcome-section">
<div class="cover" onclick="closeNav();"></div>
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="closeNav()">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>
<div class="top_contacts">
<a href="https://github.com/ZMoberg" id="profile-link" class="top_contacts-link" target="_blank" alt="Github"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/zackmoberg/" id="profile-link" class="top_contacts-link" target="_blank" alt="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
<!--Navigation bar-->
<nav id="navbar" class="nav">
<ul class="nav-links">
<li class="nav-link"><a href="#about_scroll">ABOUT</a></li>
<li class="nav-link"><a href="#projects-scroll">PROJECTS</a></li>
<li class="nav-link"><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<span class="circle three" id="three-overflow"></span>
<section class="head_sub">
<h1 class="title">ZACK MOBERG</h1>
<p class="title_sub">Web Developer & UI/UX Designer</p>
<div class="header_nav">
<ul>
<li class="title_nav"><a href="#about_scroll" class="left">ABOUT</a></li>
<li class="title_nav"><a href="#projects-scroll" class="left">PROJECTS</a></li>
<li class="title_nav"><a href="#contact" class="left">CONTACT</a></li>
</ul>
</div>
</section>
<!-- Scroll down animation -->
<div class="mouse_scroll">
<a href="#about_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="scroll_arrows">
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</header>
这是一个 link 到 repo https://github.com/ZMoberg/portfolio
如果这是解决此问题的错误方法，我深表歉意，我想遵守正确的格式设置惯例，所以请随时告诉我。
此外，由于我仍在学习，我欢迎对整个项目的任何和所有反馈。
您的跨度没有响应 overflow-x: hidden，因为它没有溢出，因为它没有任何 child 元素。事实上，body 被跨度溢出了。
因此，您可以将 overflow-x: hidden 添加到 body，或者如果您不希望圆在 Y 轴上超出您的 header（主要是在较小的屏幕上），请添加overflow: hidden 到 header.
body {
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;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #149279);
position: absolute;
}
.circle.three {
/* position: absolute; */
width: 60em;
height: 60em;
right: -25%;
z-index: 0;
}
#three-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="landing-page" id="welcome-section">
<div class="cover" onclick="closeNav();"></div>
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="closeNav()">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>
<div class="top_contacts">
<a href="https://github.com/ZMoberg" id="profile-link" class="top_contacts-link" target="_blank"
alt="Github"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/zackmoberg/" id="profile-link" class="top_contacts-link"
target="_blank" alt="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
<!--Navigation bar-->
<nav id="navbar" class="nav">
<ul class="nav-links">
<li class="nav-link"><a href="#about_scroll">ABOUT</a></li>
<li class="nav-link"><a href="#projects-scroll">PROJECTS</a></li>
<li class="nav-link"><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<span class="circle three" id="three-overflow"></span>
<section class="head_sub">
<h1 class="title">ZACK MOBERG</h1>
<p class="title_sub">Web Developer & UI/UX Designer</p>
<div class="header_nav">
<ul>
<li class="title_nav"><a href="#about_scroll" class="left">ABOUT</a></li>
<li class="title_nav"><a href="#projects-scroll" class="left">PROJECTS</a></li>
<li class="title_nav"><a href="#contact" class="left">CONTACT</a></li>
</ul>
</div>
</section>
<!-- Scroll down animation -->
<div class="mouse_scroll">
<a href="#about_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="scroll_arrows">
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</header>
</body>
</html>