問題タブ [page-break-inside]

そのクラスがdivタグまたはtableタグにアタッチされるpage-break-insideCSSディレクティブを使用しようとしています（これはブロック要素でのみ機能する可能性があると思います。その場合は、次のようにする必要があります。テーブル）。

これを行う方法を正確に説明していると思われるすべてのチュートリアルを試しましたが、何も機能しません。これはブラウザサポートの問題ですか、それとも誰かが実際にこれを機能させているのでしょうか。CSSの正確なビットは次のようになります。

<table>次の HTML ドキュメントを考えると、 IE8 で印刷するときと同じページに「テーブル タイトル」行を保持する必要があります。

にもかかわらず、page-break-inside:avoid;タイトルと表の間にまだ改ページがあります。これについての私の理解では、改ページを避けるべきであり、全体divを 2 ページ目に押し込む必要があることを示唆しています。

doctype は XHTML 1.0 Transitional です<meta http-equiv="X-UA-Compatible" content="IE=8" />。IE8 を強制的にこの構文をサポートする標準モードにするように設定し、レンダリングが標準モードで行われていることを確認しdocument.compatMode == "CSS1Compat"ました。XHTML は有効です。

私はプロジェクトに参加しており、レポート ページを変更して印刷可能にするタスクを割り当てられています。レポートでは、PHP を使用して div 内にテーブルを生成しますが、div は印刷時に 1 ページを超える場合があります。そのため、ページの長さがなくなると、テーブル/divが壊れてしまいます。最終結果は雑然とした混乱です。

次のタグを使用して print.css を変更しました。

すべての div は次のようになります。

これにより、レポートが少し整理されます (つまり、各セクションが新しいページで始まります)。しかし、これはかなりの量の紙を浪費しているようで、表の途中で改ページする問題は解決しません。私のもう 1 つのアイデアは、div の内容を 1 ページに正確に収まるように自動縮小することでした。私たちの div はどれも 2 ページを超えていないので、これが可能であれば良い解決策になると思います...しかし、これは可能ですか? css が div の長さに合わせてフォント サイズを調整する方法はありますか?

私はdiv に合わせてコンテンツをスケールすることをグーグルで検索しましたが、誰もが私が望むものとは反対のことを望んでいるようです (つまり、div はコンテンツに適合し、コンテンツは div に適合しません)。

誰かが提供できる助けはありますか? 私が見つけることができたすべての結果には、ブラウザでサポートされていないCSSが含まれているため（つまり、機能しません）、htmlテーブルをきれいに印刷する一般的な例も機能します：「page-break-inside：回避」。

前もって感謝します。

私は現在、何かを印刷する作業を行っています。可変数のブロック レベル要素を持つ動的ページがあります。1 行の場合もあれば、100 行以上の場合もあります。

page-break-inside:void; は知っています。これが実装されると (厳密な html モードの Opera、Chrome、および IE7+ でのみサポートされます)、ブロック レベルの要素が 2 ページをラップするのを防ぐと想定されます。この css タグはブラウザー間でサポートされていないため、まだ回避策があるかどうか疑問に思っています。

私は jquery を使用して、ポスト レンダリングを試み、ページごとに各要素を測定して高さを合計し、最後の要素がページの高さよりも大きくなると、page-break-before:always を追加しました。その要素ですが、それは特定のページサイズを想定した場合にのみ機能し、それは決して良い想定ではありません.

また、単一のページに 1 つのライナーを配置する意味がないため、すべての要素に page-break-before / after :always を追加したくありません。

次のダミーコードがあります：

それはいくつかをレンダリングしています

要素とページのプレビューでは、次のようになります。

次のように、最初と最後の要素に境界線を追加する必要があります。

CSSで作ってwebkitで動作させることは可能ですか？

編集: 次の css をアドバイスするすべての人に

また

それはすべてのページで機能し、次のように見えるため、私にとってはうまくいきません。

クロムで作業する必要があります

多くの行とネストされたテーブルを含む長いテーブル データがあります。このデータを印刷すると、テーブルとネストされたテーブルの行が改ページで改行されます。これは、テーブルとデータがページに分割されることを意味します。そこで、次の CSS プロパティを使用します。

しかし、これは私の場合は機能しません。ここでライブデモを見ることができます:-- http://jsfiddle.net/npsingh/S8vr8/2/show/

次のリンクでコードを編集してください:--
http://jsfiddle.net/npsingh/S8vr8/2/
---[ページを印刷するには [CTRL+P] を押すか、右クリックして [印刷] オプションをクリックします]-- -

Google Chrome バージョン 29.0.1547.66 m を使用しています

どこに問題があるのか​​正確に教えてください。ありがとう

I am dynamically adding HTML from another page and styling it for print. However, page-break-inside: avoid;, when applied to my elements (any of them), does not seem to be taken into account when printing even though it shows up in the styles. I am using Chrome 31 on Windows

Here is a jsFiddle of the simplified version of my program (WARNING: It brings up the print preview after 3 seconds. To stop this simply comment out the setInterval at the bottom), This is the version where page-break-inside:avoid doesn't have any effect in print preview

The usual "fix" I've found, adding position:relative to the element and its parent, does not work in my case. Prefixing it (as a couple people suggested) doesn't seem to work either

疑似バージョンでテストしたため（警告：これにより印刷プレビューも開きます）、page-break-inside: avoid;動的に配置された要素を使用してChrome 31で動作することはわかっていますが、コードを削除し、スタイルをいじり、トピックを調査するのに何時間も費やした後（ほとんどの投稿は非常に時代遅れです）より複雑なバージョンを同じように機能させることができなかったようです

洞察を事前にありがとう！