`row-rule-break` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die row-rule-break CSS Eigenschaft legt das Verhalten für das Aufbrechen von Zeilenregeln in Segmente fest, wenn diese Zeilenregeln auf Spaltenabstände treffen.

Probieren Sie es aus

row-rule-break: none;

row-rule-break: normal;

row-rule-break: intersection;

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>
    <i>Q</i>
    <i>R</i>
    <i>S</i>
    <i>T</i>
    <i>U</i>
    <i>V</i>
    <i>W</i>
    <i>X</i>
    <i>Y</i>
    <i>Z</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-rule: solid thick orange;
  column-rule: solid thick lavender;
  gap: 15px;
}
#example-element i {
  padding: 5px;
}

Syntax

css

/* Keywords */
row-rule-break: none;
row-rule-break: normal;
row-rule-break: intersection;

/* Global values */
row-rule-break: inherit;
row-rule-break: initial;
row-rule-break: revert;
row-rule-break: revert-layer;
row-rule-break: unset;

Werte

Diese Eigenschaft wird als einzelnes Schlüsselwort aus der folgenden Liste angegeben:

none: Es gibt keine Unterbrechungen in Zeilenregeln, wenn sie auf Spaltenabstände treffen; stattdessen wird eine kontinuierliche Zeilenregel über die gesamte Breite des Containers von Kante zu Kante gemalt.
normal: In Grid- und Flex-Containern verhält es sich wie none. In Multi-Col verhält es sich wie none. Dies ist der Standardwert.
intersection: Zeilenregeln brechen immer, wenn sie auf Spaltenabstände treffen, wobei Zeilenregel-Segmente an Container- und Abstandskanten beginnen und enden.

Beschreibung

Die Eigenschaft row-rule-break legt fest, ob Zeilenregeln in Segmente unterteilt werden können, wenn sie Spaltenabstände überqueren.

Zeilenregeln werden innerhalb eines Zeilenabstandes als ein oder mehrere Segmente dargestellt, wobei die Segmente zwischen benachbarten Gitterelementen in separaten Zeilen, zwischen Flex-Elementen oder Flex-Linien, abhängig von der flex-direction in flexiblen Layouts, oder in Lücken zwischen benachbarten Zeilen von Spalten in Multi-Col-Layouts auftreten, wenn column-height mehrere Zeilen von Spalten erstellt.

Die Eigenschaft row-rule-break bestimmt nur, ob die Unterbrechung erfolgt. Standardmäßig entspricht die Unterbrechung, oder der Raum, zwischen Zeilenregel-Segmenten der Breite des Spaltenabstandes, da jedes Segment am Rand des Abstandes (oder des Containers) beginnt und endet. Wenn der Abstand 0 ist, ist diese Unterbrechung möglicherweise nicht sichtbar. Die Endpositionen können mit den row-rule-inset Eigenschaften kontrolliert werden.

Wenn row-rule-break auf none gesetzt ist, gibt es keine Unterbrechungen, die Zeilenregel ist kontinuierlich, und alle row-rule-inset-Werte wirken sich nur auf die Zeilenregel am linken und rechten Rand des Containers aus. Wenn Unterbrechungen vorhanden sind, beeinflussen die row-rule-inset-Eigenschaften den Anfang und das Ende jedes Zeilenregel-Segments.

Die Eigenschaft row-rule-break kann zusammen mit der Eigenschaft column-rule-break unter Verwendung des Kürzels rule-break festgelegt werden.

Ob eine Zeilenregel standardmäßig aus einem einzigen kontinuierlichen Segment oder aus Segmenten besteht, die beim Überqueren von Spaltenabständen unterbrochen werden, hängt vom Containertyp ab.

Grid-Container

In Grid-Containern setzen sich standardmäßig die Zeilenregel-Segmente durch sichtbare "Kreuzungs"-Schnittstellen fort. Das Setzen von row-rule-break: intersection erzwingt, dass die Segmente bei jedem Spaltenabstand unterbrochen werden, wo sie sonst übergreifen würden.

<h1>Default rule breaks in grid</h1>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<p>
  <label
    ><input type="checkbox" /> Set
    <code>row-rule-break: intersection</code></label
  >
</p>

body {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}

:has(:checked) .grid {
  row-rule-break: intersection;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  rule: 5px solid blue;
  column-rule-color: lightblue;
  width: 100%;
}

.grid > div {
  border: 1px solid green;
  background-color: lime;
  height: 30px;
}

Standardmäßig gibt es keine Unterbrechungen der Zeilenregel. Aktivieren Sie das Kontrollkästchen, um row-rule-break auf intersection zu setzen, wodurch die kontinuierlichen Regeln bei jeder "Kreuzung" unterbrochen werden. Standardmäßig entspricht die Unterbrechung zwischen den Segmenten der Breite des column-gap.

Flex-Container

Im Flexbox-Layout, wenn die flex-direction entweder row oder row-reverse in horizontalen Schriftsystemen ist, ist die Zeilenregel kontinuierlich, wobei die Spaltensegmente am Rand der Zeilenabstände beginnen und enden. Wenn die flex-direction column oder column-reverse ist, ist die Spaltenregel kontinuierlich, wobei die Zeilensegmente am Rand der Spaltenabstände beginnen und enden.

<h1>Default rule breaks in flexbox</h1>
<article>
  <section>
    <h2>flex-direction: row</h2>
    <div class="flexbox">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
  <section>
    <h2>flex-direction: column</h2>
    <div class="flexbox column">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
</article>
<p>
  <label
    ><input type="checkbox" /> Set
    <code>row-rule-break: intersection</code></label
  >
</p>

body {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}

:has(:checked) .flexbox {
  row-rule-break: intersection;
}
article {
  display: flex;
  gap: 5vw;
  rule: 1px solid black;
  width: 100vw;
}
section {
  flex-basis: 45vw;
}
.flexbox {
  display: flex;
  flex-flow: balance;
  flex-line-count: 3;
  gap: 20px;
  rule: 5px solid blue;
  column-rule-color: lightblue;
  width: 100%;
}
.column {
  flex-flow: column balance;
  gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  height: 30px;
}

In horizontalen Schriftsystemen, wenn auf row oder row-reverse gesetzt, ist die Zeilenregel standardmäßig kontinuierlich, während bei column oder column-reverse die Zeilenregel bei jedem Spaltenabstand unterbrochen wird. Das Setzen von row-rule-break auf intersection betrifft nur die Zeilenregeln in den Szenarien row und row-reverse.

Multi-Col-Container

In Multi-Col-Containern verhält sich das Standardverhalten normal genauso wie none.

<h1>Default rule breaks in multi-col</h1>
<ol>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  <li>Black fish</li>
  <li>Blue fish</li>
  <li>Old fish</li>
  <li>New fish.</li>
  <li>This one has a little star.</li>
  <li>This one has a little car.</li>
  <li>Say! What a lot</li>
  <li>Of fish there are.</li>
  <li>Yes. Some are blue.</li>
  <li>And some are blue.</li>
  <li>Some are old.</li>
  <li>And some are new.</li>
  <li>Some are sad.</li>
  <li>And some are glad.</li>
  <li>And some are very, very bad.</li>
  <li>Why are they</li>
  <li>Sad and glad and bad?</li>
  <li>I do not know.</li>
  <li>Go ask your dad.</li>
</ol>
<fieldset>
  <legend>Set <code>row-rule-break:</code></legend>
  <label
    ><input type="radio" name="break" value="none" /> <code>none</code></label
  >
  <label
    ><input type="radio" name="break" value="normal" checked />
    <code>normal</code></label
  >
  <label
    ><input type="radio" name="break" value="intersection" />
    <code>intersection</code></label
  >
</fieldset>

body {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}
ol {
  columns: 3 / 4em;
  gap: 20px;
  rule: 5px solid blue;
  column-rule-color: lightblue;
}
li {
  border: 1px solid green;
  background-color: lime;
  list-style-type: none;
  margin-bottom: 5px;
}
:has([value="normal"]:checked) ol {
  row-rule-break: normal;
}
:has([value="intersection"]:checked) ol {
  row-rule-break: intersection;
}
:has([value="none"]:checked) ol {
  row-rule-break: none;
}
label {
  margin-right: 20px;
}

Wenn Sie intersection auswählen, wird die Zeilenregel in Segmente unterteilt, wenn sie einen Spaltenabstand erreicht, wobei jedes Segment am Rand des Abstands beginnt und endet. Die Anfangs- und Endpositionen können über die row-rule-inset Eigenschaften geändert werden.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

row-rule-break = 
  none          |
  normal        |
  intersection

Beispiele

Grundlegende Verwendung

In diesem Beispiel verwenden wir die Eigenschaft row-rule-break, um jedes Regelsegment in einem Grid-Container zu unterbrechen, sodass Zeilenregel-Segmente zwischen Spaltenabständen erstellt werden. Das Ändern der column-gap Eigenschaft ändert die Größe der Segmente.

HTML

Wir erstellen eine Liste mit 50 Elementen und einen Schieberegler, um die Breite der Spaltenabstände zu ändern. Der Großteil des HTML ist der Kürze halber ausgeblendet.

html

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>49</li>
  <li>50</li>
</ul>

<p>
  <label
    >Change the width of the column gap.
    <input type="range" min="0" max="32" value="16" id="gap"
  /></label>
  <output id="o"></output>
</p>
<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
</ul>

CSS

Wir definieren die ungeordnete Liste als einen 8-Spalten-Container, erstellen Spalten und Zeilen mit der grid-template-columns Eigenschaft und setzen list-style-type auf none, um die Aufzählungszeichen zu entfernen. Wir fügen einen gap von 20px hinzu, um genügend Platz zwischen den Spalten und Zeilen zu schaffen, um unsere 20px festen Spalten- und Zeilenregeln unterzubringen. Schließlich setzen wir die Zeilenregeln so, dass sie bei jeder Kreuzung in Segmente unterteilt werden.

css

ul {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  list-style-type: none;
  gap: 20px;

  row-rule: 10px solid olive;
  column-rule: 10px solid palegoldenrod;

  row-rule-break: intersection;
}

Der Rest des CSS ist der Kürze halber ausgeblendet.

ol {
  place-items: center;
  width: 95vw;
}
li {
  text-align: center;
  font-family: sans-serif;
  line-height: 50px;
}

const gap = document.getElementById("gap");
const ul = document.getElementById("ul");
const output = document.getElementById("o");

gap.addEventListener("input", () => {
  o.innerText = ul.style.columnGap = `${gap.value}px`;
});

Ergebnis

Erweitern Sie die Spaltenabstände und beachten Sie, wie die Unterbrechungen zwischen den Zeilensegmenten wachsen. Reduzieren Sie die Breite des Spaltenabstands auf 0px und bemerken Sie, wie die Zeilendekoration kontinuierlich erscheint. Das ist sie nicht! Der 0px Abstand zwischen den Segmenten ist möglicherweise nicht sichtbar, aber die Segmente beginnen und enden immer noch am Abstand, sodass alle mit row-rule-inset festgelegten Offsets weiterhin angewendet werden.

Spezifikationen

Spezifikation
CSS Gaps Module Level 1 # propdef-row-rule-break

Browser-Kompatibilität

Siehe auch

column-rule-break
rule-break Kurzschreibweise
rule-inset Kurzschreibweise
rule-overlap
rule-visibility-items
rule Kurzschreibweise
CSS-Abstände Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

row-rule-break CSS property

HTML

CSS

Ergebnis

Help improve MDN

`row-rule-break` CSS property