오버플로 CSS 속성이 숨겨진 값으로 작동하도록 만드는 방법

123

나는 힘든 시간을 보내고 있습니다 overflow: hidden.

기본적으로 .NET에있는 정렬되지 않은 목록의 오버플로를 숨기려고합니다 <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
컨테이너에 상대적으로 배치 된 콘텐츠와 비슷한 문제가 있었고 컨테이너도 상대적이어야했습니다. 따라서 절대적으로 배치 된 요소를 숨기는 것이 아니라 배치 된 요소를 숨기는 것처럼 보입니다. :)
— Chris
10
대단합니다-이것은 멍청한 것을 제외하고는. overflow : hidden은 숨겨져 야합니다. 문서에 대한 추상적 인 참조없이 누구든지이 경로를 선택하는 좋은 이유를 제공 할 수 있습니까?
— user1873073 2013
3
실제로 부모 요소는 위치 지정 만하면되므로 절대 및 고정도 유효합니다. 기본적으로 정적이지 않은 모든 것.
— Ryan Jenkins
1
훌륭한 대답, 내 시나리오에서도 작동했습니다. 제 경우에는 overflow : hidden이있는 div에 position : relative 속성이 있습니다. 부모에 상대적인 위치를 추가하면 문제가 해결되었습니다.
— Anurag 2014 년
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>
스 니펫 확장

— 밀로시 다 코노 비치
소스
1
말이 안돼 죄송합니다. 어떻게 인라인으로 넘쳐나 게 되었습니까? 또한 문서는 분명하다 : developer.mozilla.org/en-US/docs/Web/CSS/overflow 오버 플로우는 블록 컨테이너에 적용
— Temani Afif
1
물론 말이됩니다. 음의 오프셋이있는 위치 절대 하위 요소를 사용해보십시오. 당신은 LI들과 스팬 등의 기본 요소에 의해 인라인과 같은 실수를 할 수있다
— 밀로스 Đakonović
1
@TemaniAfif 밀로스 및 Đ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부모 컨테이너에 추가 하면 작동합니다.

추신 : 이것은 텍스트를 동적으로 자르는 솔루션을 찾는 모든 사람을위한 것입니다.

편집 : 이것은 이 질문에 대한 답을 의미 했지만 관련이 있으며이 질문에 대한 누군가를 도울 수 있기 때문에 삭제하는 대신 여기에 남겨 둘 것입니다.

— YulePale
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.