스판이나 디브 포장 방지

스판이나 디브 포장 방지

저는 한 무리의 사람들을div컨테이너에 고정된 폭의 요소들과 가로 스크롤 바가 나타났습니다. 그div/span요소는 HTML에 표시되는 순서대로 왼쪽에서 오른쪽으로 한 줄로 표시되어야 합니다.

이렇게 하면 가로 스크롤 막대가 나타나고 세로 스크롤 막대 대신 콘텐츠를 읽는 데 사용할 수 있습니다(왼쪽에서 오른쪽으로).

그들을 컨테이너에 띄운 다음에 그들을 집어넣어 보았습니다.white-space: nowrap용기에 있는 스타일이지만, 아차, 여전히 포장된 것 같습니다.

아이디어?

다음과 같이 보입니다.

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

업데이트:
사이트에서 예를 찾아볼 수 있지만, 다른 방법이 아닌 것에 대해서는 틀렸습니다. 하지만 기사가 오래된 것은 확실합니다.

시도해 보기:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

생략할 수 있음을(를).slideContainer { overflow-x: scroll; }(이 글을 읽을 때 지원할 수도 있고 지원하지 않을 수도 있는 브라우저) 그러면 이 컨테이너 대신 창에 스크롤 바가 표시됩니다.

여기서 핵심은.display: inline-block. 이것은 요즘에는 훌륭한 크로스 브라우저 지원을 받고 있지만, 여느 때처럼 모든 대상 브라우저에서 테스트해 볼 가치가 있습니다.

이 기능은 다음과 같습니다.

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

원래는 가지고 있었습니다.float : left;그게 제대로 작동하지 못하게 한 겁니다

이 솔루션을 올려주셔서 감사합니다.

특히 Twitter's Bootstrap 같은 것을 사용할 때,white-space: nowrap;어린이에게 패딩이나 마진을 적용할 때 CSS에서 항상 작동하지는 않습니다.div. 대신에, 동치를 추가하는 것.border: 20px solid transparent;패딩/패딩 대신 스타일이 더 일관성 있게 작동합니다.

언급한 대로 다음을 사용할 수 있습니다.

overflow: scroll;

필요할 때만 스크롤 막대를 표시하려면 "auto" 옵션을 사용할 수 있습니다.

overflow: auto;

오버플로우가 있는 "플로트" 속성을 사용해서는 안 된다고 생각합니다만, 먼저 예를 들어 보겠습니다.

디브들은 몸의 너비를 벗어나지 않는 것 같습니다.심지어 다른 디브 안에서도.

테스트를 위해 이를 토해냈는데(도식 없이) 생각대로 작동하지 않습니다.

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

제가 생각하는 것은 내부 디브는 iFrame을 통해 로딩될 수 있다는 것입니다. 왜냐하면 그것은 다른 페이지이고 그 내용은 매우 넓을 수 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/679804/prevent-wrapping-of-span-or-div