Cách làm cho thuộc tính CSS tràn hoạt động với giá trị ẩn dưới dạng

123

Tôi đang có một thời gian khó khăn với overflow: hidden .

Về cơ bản, tôi đang cố gắng ẩn phần tràn danh sách không có thứ tự nằm trong <div> .

Tôi không biết tại sao nó không hoạt động.

Thay vì ẩn nó, nó phá vỡ danh sách của tôi từ bố cục ngang sang bố cục dọc.

Danh sách không có thứ tự là băng chuyền và vùng chứa là danh sách.

Dưới đây là mã CSS của tôi;

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

Đây, HTML của tôi;

<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
nguồn
2
Có điều gì phản đối việc đưa ra .listmột chiều cao cố định không? Tôi nghĩ rằng nó sẽ hoạt động sau đó.
— Pekka
2
@Pekka, nó sẽ, tôi đã kiểm tra. Giả sử rằng các quy tắc CSS áp dụng ( vì mã HTML được đăng ở đây không hiển thị div.bodyvà các .containeryếu tố )
— Gabriele Petrioli
1
Điều đó đã không hoạt động. Nó bao bọc danh sách nếu danh sách tràn thay vì ẩn nó.
— Darren
1
Làm thế nào để của bạn <li>có được một bố cục ngang? Bạn đã bỏ lỡ cho chúng tôi xem một số CSS? Điều này chính xác là để làm gì? Một thanh trượt hình ảnh?
— Moin Zaman
1
Xin chào các bạn, hóa ra tôi không thể sử dụng menu ngang vì hiển thị float hoặc inline sẽ luôn tràn do chiều rộng mẹ. Tôi đang thử một cái bàn bây giờ nhưng đó cũng là một nỗi đau.
— Darren

Câu trả lời:

397

Ok nếu có ai khác đang gặp vấn đề này thì đây có thể là câu trả lời của bạn:

Nếu bạn đang cố gắng ẩn các phần tử được định vị tuyệt đối, hãy đảm bảo rằng vùng chứa các phần tử được định vị tuyệt đối đó được định vị tương đối.

— Darren
nguồn
1
Tôi đã gặp sự cố tương tự với nội dung được định vị tương đối trong vùng chứa và cũng cần vùng chứa tương đối. Vì vậy, nó không chỉ ẩn các phần tử được định vị tuyệt đối, mà còn ẩn bất kỳ phần tử được định vị nào trông giống như vậy. :)
— Chris
10
tuyệt vời - ngoại trừ điều này là mỉa mai. tràn: ẩn nên ẩn. mà không có tham chiếu trừu tượng đến tài liệu, bất cứ ai có thể cung cấp lý do chính đáng để chọn tuyến đường này so với tuyến đường có ý nghĩa hơn?
— user1873073
3
Trên thực tế, phần tử cha chỉ cần được định vị, có nghĩa là tuyệt đối và cố định cũng hợp lệ. Về cơ bản là bất cứ thứ gì không tĩnh.
— Ryan Jenkins
1
Câu trả lời tuyệt vời, cũng phù hợp với kịch bản của tôi. Trong trường hợp của tôi, div có tràn: ẩn có thuộc tính position: relative. Thêm vị trí: liên quan đến vị trí gốc đã khắc phục sự cố.
— Anurag
74

Thực ra...

Để ẩn một phần tử được định vị tuyệt đối, vùng chứa positionphải là bất kỳ thứ gì ngoại trừ static. Nó có thể được relativehoặc fixedthêm vào absolute.

— rw-nandemo
nguồn
1
Đối với bất kỳ ai khác có thể vẫn gặp phải vấn đề này: đứa trẻ phải được staticđịnh vị đồng minh, theo như tôi có thể nói. Cài đặt position:relativecho cả cha và con đều không hoạt động.
— Alvin Wan
6

Ngoài các câu trả lời được cung cấp:

có vẻ như phần tử cha (cái với overflow:hidden) không được display:inline. Thay đổi để display:inline-blocklàm việc cho tôi.

.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>
Mở rộng đoạn mã

— Miloš Đakonović
nguồn
1
xin lỗi điều này không có ý nghĩa, làm thế nào bạn quản lý để có tràn nội tuyến? tài liệu cũng rõ ràng: developer.mozilla.org/en-US/docs/Web/CSS/overflow phần tràn chỉ áp dụng cho vùng chứa khối
— Temani Afif 18/08/18
1
Chắc chắn nó có ý nghĩa. Hãy thử đặt vị trí phần tử con tuyệt đối với độ lệch âm. Bạn có thể mắc lỗi như vậy với các phần tử nội tuyến theo mặc định như LI và SPAN
— Miloš Đakonović
1
@TemaniAfif và Miloš Đakonović .. Đúng vậy, đó inline-blocksẽ hoặc bất kỳ khối nào khác như kiểu hiển thị, mặc dù trong trường hợp này, khi phần tử overflow: hiddencó float, nó cũng hoạt động trên inlinecác phần tử.
— Ason
1
khi bạn thêm vị trí tuyệt đối, phần tử sẽ trở thành một phần tử khối vì vậy không có nội tuyến nào liên quan ở đây
— Temani Afif
2
@LGSon hãy đặt ví dụ của bạn sau đó, nhưng vẫn không liên quan đến câu hỏi này .. có lẽ nên phù hợp trong một câu hỏi khác.
— Temani Afif
1

Rõ ràng, đôi khi, các thuộc tính hiển thị của phần tử gốc của phần tử chứa vấn đề không nên kết thúc cũng nên được đặt thành overflow:hidden, ví dụ:

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

Tại sao? Tôi không biết nhưng nó đã làm việc cho tôi. Xem https://medium.com/@crrollyson/overflow-hipris-not-working-check-the-child-element-c33ac0c4f565 (bỏ qua việc bắn tỉa tại stackoverflow!)

— Charles Goodwin
nguồn
0

Điều này đã làm việc cho tôi

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

Thêm position:absolutevào vùng chứa mẹ đã làm cho nó hoạt động.

Tái bút: Điều này dành cho bất kỳ ai đang tìm kiếm giải pháp để cắt ngắn văn bản một cách động.

CHỈNH SỬA: Đây được coi là câu trả lời cho câu hỏi này nhưng vì chúng có liên quan và nó có thể giúp ích cho ai đó về câu hỏi này, tôi cũng sẽ để nó ở đây thay vì xóa nó.

— YulePale
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.