From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/page-break-inside/index.html | 132 +++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/zh-cn/web/css/page-break-inside/index.html (limited to 'files/zh-cn/web/css/page-break-inside/index.html') diff --git a/files/zh-cn/web/css/page-break-inside/index.html b/files/zh-cn/web/css/page-break-inside/index.html new file mode 100644 index 0000000000..08dbf235bb --- /dev/null +++ b/files/zh-cn/web/css/page-break-inside/index.html @@ -0,0 +1,132 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - page-break-inside +translation_of: Web/CSS/page-break-inside +--- +
{{CSSRef}}
+ +

page-break-inside CSS 属性调整当前元素内的分页符。

+ +
/* Keyword values */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Global values */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
auto
+
Initial value. Automatic page breaks (neither forced nor forbidden).
+
avoid
+
Avoid page breaks inside the element.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div class="page">
+  <p>This is the first paragraph.</p>
+  <section class="list">
+    <span>A list</span>
+    <ol>
+      <li>one</li>
+<!--       <li>two</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>one</li>
+<!--     <li>two</li> -->
+  </ul>
+  <p>This is the second paragraph.</p>
+  <p>This is the third paragraph, it contains more text.</p>
+  <p>This is the fourth paragraph. It has a little bit more text than the third one.</p>
+</div>
+ +

CSS

+ +
.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 400, 160)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}Allows this property on more elements.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("css.properties.page-break-inside")}}

+ +

 

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf