“overflow-x:hidden” un solo lato?

È possibile nascondere orizzontale overflow di un elemento su un solo lato: destra o sinistra? Qualcosa di simile overflow-x-right:hidden;. Sono aperto a css e jquery base di suggerimenti.

  • Molte risposte si supponga che questo vale solo per rendere il testo in eccesso dalla parte sinistra del div. Questo sarebbe in realtà essere utile per cose come clipping box-shadow solo sul lato sinistro.
InformationsquelleAutor Marc | 2012-01-21

 

4 Replies
  1. 7

    Tutto il contenuto inizia a sinistra, se non diversamente specificato. Quindi, se si desidera che il contenuto a sinistra per essere nascosto, prendere in considerazione di fare l’elemento position: absolute, e l’impostazione di right: 0. Che si combinano con la overflow-x: hidden, che dovrebbe raggiungere il tuo obiettivo.

    • Non devono essere posizionati in modo assoluto, è possibile utilizzare qualsiasi modo per spingere il contenuto contro il diritto dell’elemento padre, impostare la larghezza e l’overflow-x:hidden e nascondere efficacemente la sinistra, come richiesto.
  2. 5

    Se CSS3 è un opzione, “clip” è sicuramente la soluzione.

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

    • In realtà, questo è già disponibile da CSS 2.1. È anche supportato da IE 6+, finché non si utilizza la virgola (e non solo usare gli spazi). Così clip è un’ottima soluzione per questo problema!
    • grazie, non lo sapevo. quei ragazzi davvero spingere duro per rendere il CSS cross-browser il più grande disastro, e lo fanno davvero bene.
    • Da MDN: Attenzione: Questa proprietà è deprecato. Utilizzare clip-path, invece. clip-path: developer.mozilla.org/en-US/docs/Web/CSS/clip-path
  3. 3

    Questo è come si può farlo utilizzando clip-path, che ha sostituito l’obsoleto clip proprietà:

    CSS:

    .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;
    }

    HTML:

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

    Nota che, come a dicembre 2017, il supporto del browser non è molto buona.

    Ulteriore lettura:

  4. 2

    Quando si dice Orizzontale, quindi abbiamo solo uno barra laterale, e che è al fondo del contenitore. Quindi, tecnicamente non c’è sinistra o diritto per che. Per verticale scorre, il direction attributo del contenitore, o genitori, determinare se si trova sulla destra o sulla sinistra.

    Che tutto si può fare, con il normale CSS, e ordinaria browser UI. In caso contrario, è possibile creare i propri controlli e widget UI.

Lascia un commento