オーバーフロー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一定の高さを与えることに反対することはありますか？それならうまくいくと思います。
— ペッカ
2
@ペッカ、それは、私はチェックしました。CSSルールが適用されると仮定します（ここに投稿されたHTMLはdiv.bodyおよび.container要素を表示しないため）
— Gabriele Petrioli
1
それはうまくいきませんでした。リストが非表示ではなくオーバーフローした場合は、リストをラップします。
— Darren
1
はどのようにして<li>水平レイアウトになりましたか？CSSをいくつか見逃してしまいましたか？これは何のためのものですか？画像スライダー？
— Moin Zaman、
1
こんにちは、親の幅のためにフロートまたはインライン表示が常に溢れるため、私は水平メニューを使用できないことがわかりました。私は今テーブルを試していますが、それも苦痛です。
— ダレン

回答:

397

他の誰かがこの問題を抱えているなら、これがあなたの答えかもしれません：

絶対配置要素を非表示にする場合は、それらの絶対配置要素のコンテナが相対的に配置されていることを確認してください。

— ダレン
ソース
1
コンテナー内のコンテンツの相対的な位置に同様の問題があり、コンテナーも相対的である必要がありました。つまり、絶対配置された要素を非表示にするだけでなく、配置された要素を非表示にすることもできます。:)
— Chris
10
素晴らしい-これはモロニックです。overflow：hiddenは非表示にする必要があります。ドキュメントへの抽象的な参照がなければ、誰でもこのルートを選択する正当な理由と、より意味のあるルートを提供できますか？
— user1873073 2013
3
実際には、親要素を配置する必要があるだけです。つまり、絶対要素と固定要素も有効です。基本的に静的ではないもの。
— Ryan Jenkins
1
私のシナリオでもうまくいきました。私の場合、overflow：hiddenを持つdivには、position：relative属性がありました。親を基準にして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親コンテナにすると機能します。

PS：これは、テキストを動的に切り捨てるソリューションを探している人を対象としています。

編集：これはこの質問に対する回答となることを意図していましたが、それらは関連しており、この質問の誰かを助ける可能性があるため、削除する代わりにここに残しておきます。

— YulePale
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.