¿Es posible ocultar el desbordamiento horizontal de un elemento en un solo lado: izquierda o derecha? Algo así como overflow-x-right:hidden;. Estoy abierto a consejos basados en css y jquery."overflow-x: hidden" ¿solo por un lado?
Cuando dice Horizontal, entonces sólo tienen uno barra lateral, y que está en el fondo del recipiente. Entonces, técnicamente no hay dejado o derecho para eso. Para rollos verticales, el atributo direction del contenedor, o sus padres, determina si está ubicado a la derecha o a la izquierda.
Eso es todo lo que puede hacer, con CSS normal y la interfaz de usuario normal del navegador. De lo contrario, debe crear sus propios controles y widgets UI.
Todo el contenido comienza a la izquierda, a menos que se defina lo contrario. Por lo tanto, si desea ocultar el contenido de la izquierda, considere la posibilidad de hacer el elemento position: absolute y configurarlo en right: 0. Combine eso con overflow-x: hidden, que debería lograr su objetivo.
No tiene que estar absolutamente posicionado, use cualquier forma de empujar el contenido hacia la derecha del elemento principal, establezca un ancho y overflow-x: oculto y efectivamente ocultará el izquierdo según lo solicitado. –
Si CSS3 es una opción, "clip" es definitivamente su solución.
En realidad, esto ya está disponible desde CSS 2.1. Incluso es compatible con IE 6+, siempre que no uses comas (y solo uses espacios). ¡Así que el clip es una excelente solución para este problema! – Sygmoral
aplausos, no lo sabía. Esos muchachos realmente se esfuerzan para que CSS cross browser sea el mayor lío, y lo hacen realmente bien. – kroe
Desde MDN: * Advertencia: esta propiedad está en desuso. Utilice ** clip-path ** en su lugar. * 'Clip-path': https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path –
Esta es la forma en que podría hacerlo usando clip-path, que sustituyó a la clip propiedad en desuso:
.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>Tenga en cuenta que, a partir de 2017 diciembre de browser support isn't very good.
Más información:
Muchas respuestas asume esto sólo se aplica a hacer desbordamiento de texto desde el lado izquierdo de la div. Esto realmente sería útil para cosas como recortar la sombra de caja solo en el lado izquierdo. – djjeck