Cara membuat properti CSS overflow berfungsi dengan hidden sebagai nilai

123

Saya mengalami waktu yang sulit dengan overflow: hidden.

Pada dasarnya, saya mencoba menyembunyikan luapan daftar tidak berurutan yang terletak di file <div>.

Saya tidak tahu mengapa ini tidak berhasil.

Alih-alih menyembunyikannya, itu merusak daftar saya dari tata letak horizontal ke tata letak vertikal.

Daftar yang tidak diurutkan adalah carousel dan containernya adalah list.

Di bawah ini adalah kode CSS saya;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

Di sini, HTML saya;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>
css overflow html Darren
sumber
2
Apakah ada yang menentang pemberian .listketinggian tetap? Saya pikir itu akan berhasil.
Pekka
2
@Pekka, itu akan, saya periksa. Dengan asumsi bahwa aturan CSS berlaku ( karena HTML yang diposting di sini tidak menunjukkan div.bodydan .containerelemen )
Gabriele Petrioli
1
Itu tidak berhasil. Ini membungkus daftar jika daftar meluap, bukan menyembunyikannya.
Darren
1
Bagaimana Anda <li>mendapatkan tata letak horizontal? Apakah Anda melewatkan menunjukkan kepada kami beberapa CSS? Sebenarnya untuk apa ini? Penggeser gambar?
Moin Zaman
1
Hai teman-teman, ternyata saya tidak bisa menggunakan menu horizontal karena tampilan float atau inline akan selalu tumpah karena lebar induknya. Saya mencoba meja sekarang tapi itu juga menyebalkan.
Darren

Jawaban:

397

Oke, jika ada orang lain yang mengalami masalah ini, ini mungkin jawaban Anda:

Jika Anda mencoba menyembunyikan elemen yang diposisikan absolut, pastikan penampung dari elemen yang diposisikan absolut tersebut diposisikan secara relatif.

Darren
sumber
1
Saya memiliki masalah serupa dengan konten yang diposisikan secara relatif dalam wadah dan membutuhkan wadah untuk menjadi relatif juga. Jadi tidak hanya menyembunyikan elemen yang diposisikan secara mutlak, itu juga menyembunyikan elemen yang diposisikan seperti apa. :)
Chris
10
hebat - kecuali ini bodoh. overflow: hidden harus disembunyikan. tanpa referensi abstrak ke dokumen, adakah yang bisa memberikan alasan yang baik untuk memilih rute ini vs rute yang lebih masuk akal?
pengguna1873073
3
Sebenarnya elemen induk hanya perlu diposisikan, artinya absolute dan fixed juga valid. Pada dasarnya segala sesuatu yang tidak statis.
Ryan Jenkins
1
Jawaban yang bagus, berhasil untuk skenario saya juga. Dalam kasus saya, div dengan overflow: hidden memiliki atribut position: relative. Menambahkan posisi: relatif terhadap induknya memperbaiki masalah.
Anurag
74

Sebenarnya...

Untuk menyembunyikan elemen posisi absolut, penampung positionharus berupa apa saja kecuali static. Bisa jadi relativeatau fixedsebagai tambahan absolute.

rw-nandemo.dll
sumber
1
Kepada orang lain yang mungkin masih menghadapi masalah ini: staticsejauh yang saya tahu , anak itu harus diposisikan sebagai sekutu. Menyetel position:relativeke orang tua dan anak tidak berfungsi.
Alvin Wan
6

Selain jawaban yang diberikan:

Sepertinya elemen induk (yang dengan overflow:hidden) tidak boleh display:inline. Berubah menjadi display:inline-blockberhasil untuk saya.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
Luaskan cuplikan

Miloš Đakonović
sumber
1
maaf ini tidak masuk akal, bagaimana Anda berhasil meluap dengan inline? Dokumentasinya juga jelas: developer.mozilla.org/en-US/docs/Web/CSS/overflow overflow hanya berlaku untuk block container
Temani Afif
1
Tentu itu masuk akal. Coba posisikan elemen anak absolut dengan offset negatif. Anda dapat membuat kesalahan seperti itu dengan sebaris dengan elemen default seperti LI dan SPAN
Miloš Đakonović
1
@TemaniAfif dan Miloš Đakonović .. Itu benar, itu inline-blockakan, atau blok lain seperti tipe tampilan, meskipun dalam hal ini, di mana elemen dengan overflow: hiddenhas float, itu bekerja juga pada inlineelemen.
Ason
1
Ketika Anda menambahkan posisi absolut, elemen tersebut menjadi elemen blok sehingga tidak ada inline yang terlibat di sini
Temani Afif
2
@LGSon mari kita berikan contoh Anda, tetapi masih tidak relevan dengan pertanyaan ini .. mungkin harus cocok di pertanyaan lain.
Temani Afif
1

Ternyata, terkadang, properti tampilan induk dari elemen yang berisi materi yang tidak boleh berakhir juga harus disetel ke overflow:hidden, misalnya:

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

Mengapa? Saya tidak tahu tetapi itu berhasil untuk saya. Lihat https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (abaikan sniping di stackoverflow!)

Charles Goodwin
sumber
0

Ini berhasil untuk saya

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

Menambahkan position:absoluteke wadah induk membuatnya berfungsi.

PS: Ini untuk siapa saja yang mencari solusi untuk memotong teks secara dinamis.

EDIT: Ini dimaksudkan sebagai jawaban untuk pertanyaan ini tetapi karena mereka terkait dan itu bisa membantu seseorang tentang pertanyaan ini, saya juga akan meninggalkannya di sini daripada menghapusnya.

YulePale
sumber