วิธีทำให้คุณสมบัติ CSS ล้นทำงานโดยซ่อนเป็นค่า

123

overflow: hiddenฉันกำลังมีช่วงเวลาที่ยากกับ

โดยทั่วไปฉันกำลังพยายามซ่อนส่วนที่ล้นของรายการที่ไม่ได้เรียงลำดับซึ่งอยู่ในไฟล์<div>.

ฉันไม่รู้ว่าทำไมถึงไม่ได้ผล

แทนที่จะซ่อนมันกลับแบ่งรายการของฉันจากเค้าโครงแนวนอนเป็นเค้าโครงแนวตั้ง

รายการที่ไม่เรียงลำดับคือภาพหมุนและคอนเทนเนอร์คือรายการ

ด้านล่างนี้คือโค้ด CSS ของฉัน

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

นี่ HTML ของฉัน;

<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

— คาร์เรน
แหล่งที่มา

2

มีอะไรที่ต่อต้านการให้.listความสูงคงที่หรือไม่? ฉันคิดว่ามันจะใช้ได้แล้ว

— Pekka

2

@Pekka ฉันจะตรวจสอบ สมมติว่าใช้กฎ CSS ( เนื่องจาก HTML ที่โพสต์ที่นี่ไม่แสดงdiv.bodyและ.containerองค์ประกอบ )

— Gabriele Petrioli

1

นั่นไม่ได้ผล จะปิดรายการหากรายการล้นแทนที่จะซ่อนไว้

— Darren

1

<li>รูปแบบแนวนอนของคุณเป็นอย่างไร คุณพลาดที่จะแสดง CSS ให้เราเห็นหรือไม่? นี่คืออะไรกันแน่? ตัวเลื่อนรูปภาพ?

— Moin Zaman

1

สวัสดีทุกคนปรากฎว่าฉันไม่สามารถใช้เมนูแนวนอนได้เพราะการแสดงผลแบบลอยหรือแบบอินไลน์มักจะล้นออกมาเนื่องจากความกว้างของพาเรนต์ ตอนนี้ฉันกำลังลองโต๊ะ แต่นั่นก็เป็นความเจ็บปวดเช่นกัน

— Darren

397

ตกลงถ้าใครกำลังมีปัญหานี้นี่อาจเป็นคำตอบของคุณ:

หากคุณพยายามซ่อนองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนตรวจสอบให้แน่ใจว่าคอนเทนเนอร์ขององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนเหล่านั้นอยู่ในตำแหน่งที่ค่อนข้างเหมาะสม

— คาร์เรน
แหล่งที่มา

1

ฉันมีปัญหาคล้ายกันกับเนื้อหาที่อยู่ในตำแหน่งที่ค่อนข้างสูงในคอนเทนเนอร์และต้องการให้คอนเทนเนอร์สัมพันธ์กันด้วย ดังนั้นมันจึงไม่เพียง แต่ซ่อนองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนเท่านั้น แต่ยังซ่อนองค์ประกอบที่อยู่ในตำแหน่งที่ดูเหมือน :)

— คริส

10

ดีมาก - ยกเว้นว่านี่เป็นเรื่องปัญญาอ่อน overflow: hidden ควรซ่อน หากไม่มีการอ้างอิงเชิงนามธรรมไปยังเอกสารทุกคนสามารถให้เหตุผลที่ดีในการเลือกเส้นทางนี้เทียบกับเส้นทางที่เหมาะสมกว่าได้หรือไม่?

— user1873073

3

จริงๆแล้วองค์ประกอบหลักจะต้องอยู่ในตำแหน่งเท่านั้นซึ่งหมายความว่าค่าสัมบูรณ์และคงที่ก็ใช้ได้เช่นกัน โดยทั่วไปแล้วสิ่งที่ไม่คงที่

— Ryan Jenkins

1

คำตอบที่ดีใช้ได้กับสถานการณ์ของฉันด้วย ในกรณีของฉัน div ที่มี overflow: hidden มี position: relative attribute การเพิ่มตำแหน่ง: สัมพันธ์กับระดับบนสุดช่วยแก้ปัญหาได้

— Anurag

74

อันที่จริง ...

หากต้องการซ่อนเป็นองค์ประกอบในตำแหน่งที่แน่นอนภาชนะต้องเป็นอะไรก็ได้ยกเว้นposition staticสามารถเป็นrelativeหรือfixedนอกเหนือไปabsoluteจาก

— RW-nandemo
แหล่งที่มา

1

สำหรับคนอื่น ๆ ที่อาจยังคงประสบปัญหานี้: เด็กต้องอยู่ในstaticตำแหน่งพันธมิตรเท่าที่ฉันสามารถบอกได้ การตั้งค่าposition:relativeทั้งผู้ปกครองและเด็กไม่ทำงาน

— Alvin Wan

6

นอกเหนือจากคำตอบที่ให้ไว้:

ดูเหมือนว่าองค์ประกอบหลัก (หนึ่งที่มีoverflow:hidden) จะต้องไม่display:inlineเป็น เปลี่ยนมาdisplay:inline-blockทำงานให้ฉัน

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

ขยายข้อมูลโค้ด

— MilošĐakonović
แหล่งที่มา

1

ขอโทษที่มันไม่สมเหตุสมผลคุณจัดการให้มีอินไลน์ล้นได้อย่างไร นอกจากนี้เอกสารประกอบยังชัดเจน: developer.mozilla.org/en-US/docs/Web/CSS/overflowการโอเวอร์

— โฟลว์

1

แน่นอนว่ามันสมเหตุสมผล ลองกำหนดตำแหน่งองค์ประกอบลูกที่แน่นอนด้วยค่าชดเชยเชิงลบ คุณอาจทำผิดพลาดดังกล่าวโดยใช้องค์ประกอบอินไลน์ตามค่าเริ่มต้นเช่น LIs และ SPANs

— MilošĐakonović

1

@TemaniAfif และMilošĐakonović .. ถูกต้องที่inline-blockจะหรือบล็อกอื่น ๆเช่นประเภทการแสดงผลแม้ว่าในกรณีนี้ซึ่งองค์ประกอบที่มีoverflow: hiddenมีอยู่floatจะทำงานกับinlineองค์ประกอบได้ด้วย

— Ason

1

เมื่อคุณเพิ่มตำแหน่งสัมบูรณ์องค์ประกอบจะกลายเป็นองค์ประกอบบล็อกดังนั้นจึงไม่มีอินไลน์เกี่ยวข้องที่นี่

— Temani Afif

2

@LGSon ลองใส่ตัวอย่างของคุณแล้ว แต่ยังไม่เกี่ยวข้องกับคำถามนี้ .. น่าจะเหมาะกับคำถามอื่น

— Temani Afif

1

เห็นได้ชัดว่าบางครั้งคุณสมบัติการแสดงผลของผู้ปกครองขององค์ประกอบที่มีเรื่องที่ควรไม่เกินควรนอกจากนี้ยังได้รับการตั้งค่าให้overflow:hiddenเป็นอย่างดีเช่น:

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

ทำไม? ฉันไม่รู้ แต่มันได้ผลสำหรับฉัน ดูhttps://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ละเว้นการสนิปที่ stackoverflow!)

— ชาร์ลส์กู๊ดวิน
แหล่งที่มา

0

สิ่งนี้ได้ผลสำหรับฉัน

<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>

การเพิ่มposition:absoluteไปยังคอนเทนเนอร์หลักทำให้มันใช้งานได้

PS: นี่คือสำหรับทุกคนที่กำลังมองหาวิธีแก้ปัญหาในการตัดข้อความแบบไดนามิก

แก้ไข: นี่เป็นคำตอบสำหรับคำถามนี้แต่เนื่องจากมีความเกี่ยวข้องกันและสามารถช่วยใครบางคนเกี่ยวกับคำถามนี้ได้ฉันจะทิ้งไว้ที่นี่แทนการลบ

— YulePale
แหล่งที่มา