"溢出-x:隐藏"只有一面？

Question

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

Answer 1

这就是您可以使用 来执行此操作的方法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 月，浏览器支持不是很好。

进一步阅读：

• MDN： clip-path
• CSS 技巧： clip-path

Answer 2

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

Answer 3

如果CSS3是一个选项,"剪辑"绝对是你的解决方案.

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

Answer 4

当你说Horizo​​ntal时，我们只有一个侧栏，它位于容器的底部。因此，从技术上讲，没有左或右之分。对于垂直滚动，direction容器或父级的属性决定它是位于右侧还是左侧。

这就是您使用普通 CSS 和普通浏览器 UI 所能做的。否则，您应该创建自己的控件和 UI 小部件。