Seltsames Verhalten auf Tabelle und Tabellenzelle mit prozentualer Breite

Question

Ich bin kürzlich auf eine Frage gestoßen, bei der jemand versucht hat, ein korrektes Zeilenumbruchverhalten auf seinen Headern zu bekommen. Etwas wie folgt aus:

Ihre Umsetzung ergab unterschiedliche Ergebnisse für unterschiedliche Kopf- und damit die Frage. Die Implementierung war ziemlich merkwürdig, indem table für das Element und table-cell für die :before und :after verwendet wurde. Das resultierende Verhalten war für mich ziemlich überraschend. Ich habe einen Test gemacht auf jsfiddle, schauen Sie.

Sie werden sehen, dass ich zwei Klassen habe; a und b, wobei ersterer eine Breite von 25% und letzterer von 40% aufweist. Trotzdem ist der b fast 5 mal breiter als a. Wenn sie auf 40% bzw. 45% gesetzt werden, ist b doppelt so groß wie a. Dies ist ein völlig unerwartetes Verhalten für nur 5% Unterschied. Die Länge des Textes scheint dies ebenfalls zu beeinflussen.

Ich bekomme, dass diese Implementierung schlecht ist und dass es "brechen" würde. Allerdings würde ich gerne wissen, warum es bricht so wie es tut. Das ergibt für mich keinen Sinn.

div { 
 
    display: table; 
 
    background: grey; 
 
    margin: 10px 0; 
 
} 
 
div:before, 
 
div:after { 
 
    width: 25%; 
 
    position: relative; 
 
    content: ''; 
 
    border-top: 2px solid black; 
 
    display: table-cell; 
 
} 
 
div.b:before, 
 
div.b:after { 
 
    width: 45%; 
 
}

<div class="a">text</div> 
 
<div class="a">some more text</div> 
 

 
<div class="b">text</div> 
 
<div class="b">some more text</div>

Answer 1

Das automatische tabellarische Layout wird durch den Standard nicht festgelegt, so empfehle ich diese Art von Prozentsatz Tricks gegen die Verwendung, die wahrscheinlich bei einigen Browsern brechen.

Allerdings scheint es den meisten Browsern wie folgt verhalten:

• Die ::before und ::after Pseudoelemente den angegebenen Prozentsatz der Tabelle nehmen.
• Der Text wird in eine anonyme Zelle mit der Breite des Textes eingeschlossen. Dies wird den verbleibenden Prozentsatz darstellen, der von den Pseudoelementen übrig bleibt.
• Die Breite der Tabelle wird durch die obigen Einschränkungen bestimmt.

Also, wenn Sie width: 25% haben, wird der Text die restlichen 50% übernehmen.

tablewidth = textwidth/50% = 2 * textwidth 
pseudowidth = 25% * tablewidth = 0.5 * textwidth 

Wenn Sie width: 40% haben, wird der Text der verbleibenden 20% nehmen.

tablewidth = textwidth/20% = 5 * textwidth 
pseudowidth = 40% * tablewidth = 2 * textwidth 

Wenn Sie width: 45% haben, wird der Text der verbleibenden 10% nehmen. Das heißt, die Tabelle wird ihre Breite in Bezug auf den vorherigen Fall verdoppeln, wenn der Text derselbe ist.

Natürlich fängt es an, kompliziert zu werden, wenn die wie oben beschrieben berechnete gewünschte Tischbreite den umschließenden Block überschreitet.Dann

• Der Tisch wird so breit wie der umschließende Block

• Die Textzelle wird die Breite des verbleibenden resultierende Prozentsatz durch die Pseudoelemente links lösen. Das ist weniger als die bevorzugte Breite des Texts, also wird der Text in mehrere Zeilen umgebrochen.

  Die Textzelle wird jedoch nicht schmaler als die erforderliche Mindestbreite des Texts sein. Dies wird normalerweise die Breite des längsten Wortes sein, kann sich aber z. word-break: break-all oder white-space: nowrap.

• Der verbleibende freie Platz im Text wird gleichmäßig auf die Pseudoelemente verteilt.

  Wenn der verbleibende Platz negativ ist, haben die Pseudoelemente eine Breite von 0, und die Tabelle wird größer (überläuft den umgebenden Block), um das auszugleichen.