“溢出-x：隐藏”只有一面？

Question

是否可以仅在一侧隐藏元素的水平溢出：左侧还是右侧？像overflow-x-right:hidden;之类的东西。我对基于CSS和jquery的提示持开放态度。

Answer 1

除非另有说明，否则所有内容均从左侧开始。因此，如果您希望隐藏左侧的内容，请考虑制作元素position: absolute，并将其设置为right: 0。将它与overflow-x: hidden结合起来，这应该可以实现你的目标。

Answer 2

如果CSS3是一个选项，“剪辑”绝对是你的解决方案。

http://www.css3.com/css-clip/

Answer 3

当你说水平，那么我们只有一个侧栏，它位于容器的底部。所以，从技术上讲，没有任何左翼或右翼。对于垂直滚动，容器或父项的direction属性确定它是位于右侧还是左侧。

通过普通的CSS和普通的浏览器UI，您可以做到这一切。否则，您应该创建自己的控件和UI小部件。

Answer 4

这是你如何使用clip-path来做到这一点，它取代了已弃用的clip属性：

.outer {
  background-color: rgba(0,0,255,.5);
  width: 100px;
  height: 100px;
  margin: 100px;
  clip-path: inset( -100vw -100vw -100vw 0 );
}

.inner {
  background-color: rgba(255,0,0,.5);
  width: 200px;
  height: 80px;
  position: relative;
  top: 10px;
  left: -50px;
}

<div class="outer">
  <div class="inner"></div>
</div>

请注意，截至2017年12月，browser support isn't very good。

进一步阅读：

• MDN: clip-path
• CSS-Tricks: clip-path