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

CSSを使用してテキストの長さを「n」行に制限することはできますか（または垂直方向にオーバーフローしたときにカットします）。 text-overflow: ellipsis; 1行のテキストに対してのみ機能します。 元のテキスト： Ultrices natoque mus mattis、aliquam、pelentesque tinciduntのエリートpurus lectus、vel ut aliquet、elementum nunc nunc rhoncus placerat urna！座ってest sed！Ut penatibus turpis mus tincidunt！ダピバスセドアエネン、マグナサジティス、ロレムベリット 必要な出力（2行）： Ultrices natoque mus mattis、aliquam、pelentesque tinciduntの cras ellit purus lectus、vel ut aliquet、elementum ...

515 css  text  overflow  ellipsis 

CSSを使いたい text-overflowテーブルセルで、テキストが長すぎて1行に収まらない場合は、複数行に折り返されるのではなく省略記号が表示されます。これは可能ですか？ 私はこれを試しました： td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } しかし、white-space: nowrapはテキスト（およびそのセル）を継続的に右に拡張し、テーブルの幅全体をコンテナの幅を超えて押し上げているように見えます。ただし、これがないと、テキストがセルの端に達したときに複数行に折り返され続けます。

500 css  overflow 

スタイルとマークアップがあるとします。 ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> …

455 html  css  overflow 

この単純なCSSが機能しない理由はわかりません... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } <div class="app"> <a href="">Test Test Test Test Test Test</a> </div> コードスニペットを実行する結果を非表示スニペットを展開 4番目の「テスト」の前後でカットオフする必要があります

368 overflow  ellipsis  css 

overflow:autodivのをチェックすることは可能ですか？ 例えば： HTML <div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> * content </div> JQUERY $('.my_class').live('hover', function (event) { if (event.type == 'mouseenter') { if( ... if scrollbar visible ? ... ) { alert('true'): } else { alert('false'): } } }); コンテンツは短い（スクロールバーがない）場合もあれば、長い（スクロールバーが表示される）場合もあります。

277 jquery  scroll  overflow 

以下は私のコードです。なぜ #firstDivがすべてのブラウザによって押し下げられているのかを理解したいと思います。どういうわけかそれを上に引っ張るのではなく、なぜ下に押されるのかという事実の内部の仕組みを本当に理解したいです。（そして私は彼らのトップを揃える方法を知っています:)） そして、私はそのoverflow：hiddenがそれを引き起こしていることを知っていますが、それがなぜそのdivを押し下げているのかはわかりません。 body { width: 350px; margin: 0px auto; } #container { border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } #thirdDiv { display: inline-block; border: 5px solid yellowgreen; …

238 overflow  css 

だから現在私は持っています： #div { position: relative; height: 510px; overflow-y: scroll; } ただし、一部のユーザーにとって、そこにさらに多くのコンテンツがあることは明らかだとは思いません。彼らは私のdivが実際により多くのコンテンツを含んでいることを知らずにページを下にスクロールすることができました。私は高さを510pxにして一部のテキストを切り取り、一部のページではより多くのコンテンツがあるように見えますが、すべてのページで機能するわけではありません。 私はMacを使用しています。ChromeとSafariでは、垂直スクロールバーは、マウスがDivの上にあり、アクティブにスクロールしたときにのみ表示されます。常に表示させる方法はありますか？

224 css  macos  scroll  overflow 

フレッドに会います。彼はテーブルです： <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> フレッドのアパートはサイズを変更するという奇妙な習慣を持っているため、他のすべてのユニットを押しのけてウィットフォード夫人のリビングルームを忘却に追いやらないように、コンテンツの一部を非表示にする方法を学びました。 <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> これは機能しますが、フレッドは、彼の右のセル（ニックネームはCelldito）が少しスペースをあきらめた場合、左のセルはほとんど切り捨てられないだろうというしつこい感じを持っています。彼の正気を保存できますか？ 要約すると、どのようにしてテーブルのセルが均等にオーバーフローし、それらがすべて空白をあきらめた場合にのみですか？

223 html  css  overflow  tablelayout 

ページに高さを100％に設定したdiv要素があります。身長も100％に設定されています。内部のdivには背景などがあり、本体の背景とは異なります。これはdivの高さをブラウザー画面の高さの100％にするために機能しますが、問題はそのdiv内にブラウザー画面の高さを超えて垂直に伸びるコンテンツがあることです。下にスクロールすると、divはページのスクロールを開始する必要があったポイントで終了しますが、コンテンツはそれを超えてオーバーフローします。内部コンテンツに合わせて、divを常に一番下まで移動させるにはどうすればよいですか？ ここに私のCSSの簡略化があります： body { height:100%; background:red; } #some_div { height:100%; background:black; } ページをスクロールすると、黒さが終了し、コンテンツが赤い背景に流れ込みます。#some_divで位置を相対に設定するか絶対に設定するかに関係なく、問題はどちらの方法でも発生します。#some_div内のコンテンツは主に絶対位置に配置され、データベースから動的に生成されるため、事前に高さを知ることはできません。 編集：これは問題のスクリーンショットです：

172 css  html  height  overflow 

divの高さを取得する方法について質問があります。私はの承知している.height()とinnerHeight()、それらのどれもが、この場合、私のために仕事をしません。実は、この場合、オーバーフロー幅のオーバーフローを持つdivがあります。スクロールし、divの高さが固定されています。 .height()またはを使用するとinnerHeight()、両方とも表示領域の高さがわかりますが、オーバーフローを考慮に入れるにはどうすればよいですか？

160 jquery  height  overflow 

要素がオーバーフローしたかどうかを検出する最も簡単な方法は何ですか？ 私の使用例は、特定のコンテンツボックスの高さを300pxに制限することです。内部のコンテンツがそれよりも高い場合は、オーバーフローで切り捨てます。しかし、オーバーフローしている場合は「詳細」ボタンを表示したいが、そうでない場合はそのボタンを表示したくない。 オーバーフローを検出する簡単な方法はありますか、それともより優れた方法はありますか？

153 javascript  css  overflow 

私は実際には2つの問題を抱えていますが、最初の問題を最初に解決しましょう。 メニューのスクロールの左側に固定位置divがあります。右側は、適切にスクロールする標準のdivです。問題は、ブラウザのビューポートが小さすぎてメニュー全体を表示できない場合です。スクロールして表示する方法がありません（少なくともcssではできません）。CSSで別のオーバーフローを使用してみましたが、divがスクロールしません。メニューを含むdivは、min-height：100％とposition：fixed ..に設定する必要があります。両方の属性を保持する必要があります。 メニューを含むdivは、絶対的に配置され、高さが100％に設定された別のラッパーdiv内にあります。 コンテンツがdivに対して高すぎる場合、どうすれば垂直にスクロールできますか？ それは私にスクロールバーを表示したくないという他の問題を引き起こします...しかし、私はすでにその答えを持っていると思います（divをスクロールできないため、まだ動作しません）はじめに）。 解決策はありますか？おそらくJavaScriptが必要ですか？（私はほとんど知りません） JS Fiddleの例 そして、問題を引き起こしている関連コード（ここにすべてを投稿すると長すぎるので）： .fixed-content { min-height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; } height：100％も追加してみて、それが問題であるかどうかを確認しましたが、どちらも機能しませんでした。

150 javascript  css  scroll  overflow  css-position 

私は3つのレベルがありdivます： （緑色以下）トップレベルdivを有しますoverflow: hidden。これは、ボックスのサイズを超える場合、そのボックス内の一部のコンテンツ（ここには表示されていません）をトリミングしたいためです。 （中には、下記赤）、この内部では、私が持っているdivとposition: relative。これは、次のレベルでのみ使用できます。 （下の青で）最後divに、フローから取り出しましたが、ページに対してではなくposition: absolute、赤に対して配置したいと思いdivます。 青いボックスを流れから外して、緑のボックスを超えて拡張させたいのですが、次のように赤いボックスに対して相対的に配置します。 しかし、以下のコードで、私は得ます： そしてposition: relative、赤いボックスのを削除すると、青いボックスが緑のボックスから出ることが許可されますが、赤いボックスに対して相対的に配置されなくなります。 方法はありますか： overflow: hidden緑色のボックスに保管してください。 青色のボックスが緑色のボックスを超えて拡大し、赤色のボックスに相対的に配置されていますか？ 完全なソース： #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { position: absolute; top: 10px; background: #eef; padding: 2px; …

143 css  overflow  css-position 

ここにウェブサイトがあります。 デスクトップブラウザで見ると、黒いメニューバーが正しく以来、唯一のウィンドウの端まで伸びbodyていますoverflow-x:hidden。 AndroidとiOSのどちらのモバイルブラウザーでも、黒いメニューバーは全幅で表示され、ページの右側に空白が表示されます。私の知る限り、この空白はタグhtmlやbodyタグの一部でもありません。 ビューポートを特定の幅に設定したとしても<head>： <meta name="viewport" content="width=1100, initial-scale=1"> サイトは1100pxまで拡大しますが、1100を超える空白があります。 何が欠けていますか？ビューポートを1100に保ち、オーバーフローを遮断するにはどうすればよいですか？

142 css  overflow  viewport  mobile-browser 

ウェブサイトに利用規約を表示したい。テキストフィールドを使用したくないし、ページ全体を使用したくない。選択した領域にテキストを表示し、垂直スクロールバーのみを使用して、すべてのテキストを読み上げたいのですが。 現在、私はこのコードを使用しています： <div style="width:10;height:10;overflow:scroll" > text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …

136 css  html  overflow