タグ付けされた質問 「overflow」

オーバーフローは、コンテンツが含まれているボックスからオーバーフローした場合に何が起こるかを管理するCSSプロパティです。スタックバッファオーバーフローのバグと脆弱性にはこのタグを使用しないでください。代わりに[buffer-overflow]や[stack-smash]を使用してください。

4
絶対位置とオーバーフローを非表示にする
2つのDIVがあり、一方はもう一方に埋め込まれています。外側のDIVが絶対配置されていない場合、絶対配置されている内側のDIVは、外側DIVの非表示のオーバーフローに従いません(例)。 外側のDIVを絶対位置に設定せずに、内側のDIVが外側のDIVのオーバーフローを非表示にする可能性はありますか?また、テーブルTD(例)から「成長」する必要があるため、内部DIVの相対位置はオプションではありません。 他のオプションはありますか?

7
CSSオーバーフロー-1行のみのテキスト
私はdiv次のCSSスタイルを持っています: width:335px; float:left; overflow:hidden; padding-left:5px; その中にdiv長いテキスト行を挿入すると、改行されてすべてのテキストが表示されます。私が欲しいのは、改行しないテキストを1行だけにすることです。テキストが長い場合、このあふれるテキストを消したい。 高さの設定を考えていましたが、間違いのようです。 多分私がフォントと同じ高さを追加した場合、それは機能し、異なるブラウザで問題を引き起こさないはずですか? どうやってやるの?
134 html  css  overflow 


14
<body>に適用されたoverflow:hiddenはiPhone Safariで機能しますか?
んoverflow:hiddenに適用される&lt;body&gt;iPhoneのSafariで動作しますか?そうではないようです。それを達成するためにウェブサイト全体にラッパーを作成することはできません... あなたは解決策を知っていますか? 例:長いページがあり、「折り目」の下にあるコンテンツを非表示にしたいのですが、iPhone / iPadで動作するはずです。
131 iphone  css  ipad  safari  overflow 


5
オーバーフローCSSプロパティを非表示の値で機能させる方法
とは大変overflow: hiddenです。 基本的に、私はにある順不同リストのオーバーフローを隠そうとしてい&lt;div&gt;ます。 なぜこれがうまくいかないのか私にはわかりません。 リストを非表示にする代わりに、リストを水平レイアウトから垂直レイアウトに分割します。 順不同リストはカルーセルで、コンテナはリストです。 以下は私の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: …
123 css  overflow  html 


11
HTML要素にスクロールバーがあるかどうかを確認する
要素にスクロールバーがあるかどうかを確認する最も速い方法は何ですか? もちろん、要素がそのビューポートより大きいかどうかを確認することは、次の2つの値を確認することで簡単に実行できます。 el.scrollHeight &gt; el.offsetHeight || el.scrollWidth &gt; el.offsetWidth しかし、それはそれが同様にスクロールバーを持っていることを意味しません(したがって、実際に人間がスクロールすることができます)。 質問 1つのクロスブラウザーで2つの JavaScriptのみ(jQueryがない場合と同様)でスクロールバーを確認するにはどうすればよいですか? Javascriptのみ。非常に高速なjQueryセレクターフィルターを作成したいので、可能な限り小さなオーバーヘッドが必要です。 // check for specific scrollbars $(":scrollable(x/y/both)") // check for ANY scrollbar $(":scrollable") overflowスタイル設定を確認する必要があると思いますが、クロスブラウザーでそれを行うにはどうすればよいですか? 追加編集 overflowスタイル設定だけではありません。要素にスクロールバーがあるかどうかを確認することは、見かけほど簡単ではありません。上で書いた最初の式は、要素に境界線がない場合は正常に機能しますが、境界線がかなり広い場合(特に境界線の幅offsetが大きい場合)、寸法はscroll寸法より大きくなる場合がありますが、要素はスクロール可能です。offset要素の実際のスクロール可能なビューポートを取得し、それをscroll寸法と比較するには、実際に寸法から境界を差し引く必要があります。 今後の参考のために :scrollablejQueryセレクターフィルターは私の.scrollintoview()jQueryプラグインに含まれています。誰かがそれを必要とするならば、完全なコードは私のブログ投稿にあります。実際の解決策は提供されていませんが、Soumyaのコードは問題の解決に大きく役立ちました。それは私を正しい方向に向けました。


6
右ではなく左へのオーバーフロー
overflow:hiddenユーザーが入力するときに電話番号を表示するdivがあります。div内のテキストは右に揃えられ、テキストが左に大きくなるにつれて着信文字が右に追加されます。 ただし、テキストがdivに収まらないほど大きくなると、数字の最後の文字が自動的にトリミングされ、ユーザーは入力した新しい文字を表示できなくなります。 私がしたいことは、divがコンテンツの右端を表示して左側にオーバーフローしているように、左の文字をトリミングすることです。この効果を作成するにはどうすればよいですか?
105 css  html  overflow 

4
オーバーフローの外側に子を表示する:非表示の親
CSSではoverflow:hidden、フローティング子の高さで拡張できるように、が親コンテナに設定されています。 しかし、それと組み合わせると、別の興味深い機能もありmargin: autoます... PREVIOUS兄弟がフローティング要素である場合、実際にはそれと並置されて表示されます。つまり、兄弟がその場合、float:leftコンテナfloat:none overflow:hiddenは兄弟の右側に表示され、改行は表示されません。通常のフローに浮かんでいるかのように表示されます。前の兄弟がfloat:rightその場合、コンテナは兄弟の左側に表示されます。このコンテナのサイズを変更すると、フローティング要素の中央に正確に表示されます。あなたが以前の2人の兄弟、1があれば言ってやるがfloat:left他にfloat:right、コンテナは2わたってるしき中央に表示されます。 だからここに問題があります... 子供をマスキングせずにそのタイプのレイアウトを維持するにはどうすればよいですか? Web全体をグーグルで検索するclear:bothと、コンテナを拡張する方法がわかります...しかし、左/右の前の子の中心を維持するための代替ソリューションは見つかりません。コンテナを作成すると、コンテナoverflow:visibleは突然フローティング要素のレイアウトフローを無視し、フローティング要素の上に階層化されて表示されます。 だから質問: overflow:hiddenレイアウトを維持するためにコンテナが必要です... 子供たちがマスクされないようにするにはどうすればよいですか?コンテナの外側で、子を親に対して絶対的に配置する必要があります。 または overflow:visibleコンテナの外側で親に対して子を絶対に配置できるようにするにはどうすればよいですか...まだ兄弟のfloat-like-layout-flowを保持しますか?

4
CSS:固定された高さのコンテナー内のdivのスクロールバーを取得する方法
次のマークアップがあります。 &lt;div class="FixedHeightContainer"&gt; &lt;h2&gt;Title&lt;/h2&gt; &lt;div class="Content"&gt; ..blah blah blah... &lt;/div&gt; &lt;/div&gt; CSSは次のようになります。 .FixedHeightContainer { float:right; height: 250px; width:250px; } .Content { ??? } そのコンテンツのため、の高さdiv.Contentは通常、によって提供されるスペースよりも大きくなりdiv.FixedHeightContainerます。現時点では、div.Content陽気に底から伸びていますdiv.FixedHeightContainer-私が望むものではありません。 div.Content高さが高すぎて収まらない場合にスクロールバーを取得するように指定するにはどうすればよいですか(できれば垂直のみですが、うるさくありません)。 overflow:autoそしてoverflow:scroll、いくつかの奇妙な理由で、何もしないされています。

9
Androidアクションバーにオーバーフローが表示されない
アプリに3つのアイテムのアクションバーがあります。 スペースの問題により表示できるのは2つだけなので、最初のものが表示され、残りがオーバーフローで表示されることを期待します。ただし、実際には最初の2つの項目のみが表示され、オーバーフローは検出されません。 関連するコードは次のとおりです。list_menu.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;menu xmlns:android="http://schemas.android.com/apk/res/android" &gt; &lt;item android:id="@+id/menu_insert" android:icon="@android:drawable/ic_menu_add" android:title="@string/menu_insert" android:showAsAction="ifRoom|withText"/&gt; &lt;item android:id="@+id/menu_call" android:icon="@android:drawable/ic_menu_call" android:title="@string/menu_call" android:showAsAction="ifRoom|withText"/&gt; &lt;item android:id="@+id/menu_agenda" android:icon="@android:drawable/ic_menu_agenda" android:title="@string/menu_agenda" android:showAsAction="ifRoom|withText"/&gt; &lt;/menu&gt; Activity.java public boolean onCreateOptionsMenu(Menu menu) { MenuInflater mi = getMenuInflater(); mi.inflate(R.menu.list_menu, menu); return true; }

22
スクロールが原因でレスポンシブテーブル内のブートストラップボタンのドロップダウンが表示されない
overflow: auto;プロパティのためにドロップダウンが表示されないため、応答がありスクロールがアクティブな場合、テーブル内のドロップダウンボタンに問題があります。これが折りたたまれているときにボタンのドロップダウンオプションを表示するために、どうすれば修正できますか?いくつかのjQueryを使用できますが、左右のスクロールに問題があったため、別の解決策を見つけることにしました。わかりやすくするために写真を添付し​​ました。 これが小さなjsフィドルです:

9
スクロールバーをhtmlテーブルに表示する方法
設定されたサイズを維持するためにhtmlテーブルが必要なページを書いています。テーブルの上部にあるヘッダーを常に表示する必要がありますが、テーブルに追加された行数に関係なく、テーブルの本体もスクロールする必要があります。 このURLのメソッド2のように見せたい:http://www.cssplay.co.uk/menu/tablescroll.html これを試しましたが、スクロールバーが表示されません。 tbody { height: 80em; overflow: scroll; } &lt;table border=1 id="qandatbl" align="center"&gt; &lt;tr&gt; &lt;th class="col1"&gt;Question No&lt;/th&gt; &lt;th class="col2"&gt;Option Type&lt;/th&gt; &lt;th class="col1"&gt;Duration&lt;/th&gt; &lt;/tr&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class='qid'&gt;&lt;/td&gt; &lt;td class="options"&gt;&lt;/td&gt; &lt;td class="duration"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; コードスニペットを実行する結果を非表示スニペットを展開

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