nicht angemeldet
Frage zum Wiki-Artikel „Whitespace“
0 
Gunnar Bittersmann
Frage zum Wiki-Artikel „Whitespace“
MudGuard
Rolf BWie kann man whitespace unterdrücken?
Denn: der kann durchaus auch Probleme machen. Beispiel:
ul.inline li {
display: inline;
inline-size: fit-content;
padding: 0;
margin: 0;
&:not(:last-child):after {
display: inline;
content: ",";
margin-inline-end: 0.75ch;
}
}
…
<ul class="inline">
<li>Aha?</li>
<li>1</li>
<li>2</li>
</ul>
Damit wird dann, wenn es einen Umbruch gibt, aus „Aha?, 1, 2“ ein (hier wegen der Sichtbarkeit etwas übertrieben) „Aha?, 1 , 2“. Die einzige Lösung, die ich da bisher sehe:
<ul class="inline">
<li>Aha?</li><li>1</li><li>2</li></ul>
Das funktioniert zwar, aber der Quelltext sieht … aus. Und wird, wenn so etwas dann evtl. auch noch öfter, verschachtelt, vorkommt, „etwas unübersichtlich“.
-
@@nix
ul.inline li { display: inline; inline-size: fit-content; padding: 0; margin: 0; &:not(:last-child):after { display: inline; content: ","; margin-inline-end: 0.75ch; } }Du kannst bei
ul.inline lisowohlinline-size: fit-contentals auchpadding: 0als auchmargin: 0weglassen, da Defaultwerte bzw. keine Wirkung. Ebensodisplay: inlinebei&:not(:last-child)::after.Dort solltest du aber noch einen Doppelpunkt spendieren:
::after– zur Unterscheidung von Pseudoelement und Pseudoklasse.Damit wird dann, wenn es einen Umbruch gibt, aus „Aha?, 1, 2“ ein (hier wegen der Sichtbarkeit etwas übertrieben) „Aha?, 1 , 2“.
Wird es das? Ich kann das nicht nachvollziehen. Beispiel
Und könntest du bitte selbst jeweils Online-Beispiele für deine Probleme erstellen? Danke.
🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
Hi,
ul.inline li { display: inline; inline-size: fit-content; padding: 0; margin: 0; &:not(:last-child):after { display: inline; content: ","; margin-inline-end: 0.75ch; } }ist das Code für einen CSS-Preprocessor?
Oder ist das &... neue CSS-Syntax, von der ich bisher nix weiß? Wenn ja, wo kann ich was dazu nachlesen?
cu,
Andreas a/k/a MudGuard-
@@MudGuard
ul.inline li { display: inline; inline-size: fit-content; padding: 0; margin: 0; &:not(:last-child):after { display: inline; content: ","; margin-inline-end: 0.75ch; } }ist das Code für einen CSS-Preprocessor?
Nicht notwendigerweise.
Oder ist das &... neue CSS-Syntax, von der ich bisher nix weiß?
Kann schon sein. 😏
Wenn ja, wo kann ich was dazu nachlesen?
In der Spec: WD, ED. In MDN. Auf Can I Use.
🖖 Живіть довго і процвітайте
PS. Fun fact: In der CSSBattle hab ich mir zwei Goldmedaillen bei alten Targets ergattert, indem ich
*{foo:bar}*+*{baz:quzzu*{foo:bar;+*{baz:quzgeändert hab. 😎--
Ad astra per aspera-
Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
-
Hi,
Oder ist das &... neue CSS-Syntax, von der ich bisher nix weiß?
Kann schon sein. 😏
Wenn ja, wo kann ich was dazu nachlesen?
Danke Dir, das sieht ja sehr interessant aus.
PS. Fun fact: In der CSSBattle hab ich mir zwei Goldmedaillen bei alten Targets ergattert, indem ich
*{foo:bar}*+*{baz:quzzu*{foo:bar;+*{baz:quzgeändert hab. 😎Hast Du früher auch 80-Zeichen-Perlscripts mit möglichst viel Funktionalität gebaut?
cu,
Andreas a/k/a MudGuard -
Ich finde dieses „&“ angenehm und hilfreich. Hilft es doch, Dinge im CSS zusammenzuhalten, die sich sonst im Laufe der Zeit immer weiter voneinander entfernen — und dann mehrfach, einander überlagernd oder sonst wie aufblähend und verwirrend als Zombie herumlungern.
-
-
-
Ah ja, Fragmente vom „verflixt noch mal, wie geht das weg“ herumspielen. Danke für den Hinweis (weil: wenn „CSS“ was nicht beachtet, dann fällt das so leicht auch nicht mehr auf).
Und das mit dem Beispiel scheint knifflig zu sein. Vielleicht klappt es so:
<head> <style> ul { display: inline; padding: 0; margin: 0; } li { display: inline; inline-size: 0; &:not(:last-child)::after { display: inline; content: ", "; } } </style> </head> <body> <ul> <li>Vorne</li> <li> <ul> <li>wir</li> <li>sind</li> <li>Mitte</li> </ul> </li> <li>Hinten</li> </ul> <hr> <ul><li>Vorne</li><li><ul><li>wir</li><li>sind</li><li>Mitte</li></ul></li><li>Hinten</li></ul> </body>Ja, das geht. Auch wenn der „Effekt“ da nicht sehr aufträgt. Nur das Komma hinter „der Mitte“ fällt da aus dem Rahmen, hängt bei geeigneter Breite am Anfang der folgenden Zeile.
-
Hallo nix,
Mit inline kann es überall innerhalb der List Items zu einem Umbruch kommen. Ist das dein Wunsch? Andernfalls könnte das ul Element auch
display:flexsein, mitflex-flow:row wrap, ohneinlinean den Items, dann wäre das Komma gebändigt.Wenn die komplette Liste inline sein muss, gibt's auch
inline-flex.Die Frage, ob das tatsächlich eine Liste ist (die von einem Narrator auch als „Liste mit 3 Einträgen“ vorgetragen wird) hat du für dich geprüft?
Rolf
--
sumpsi - posui - obstruxi-
Nein, es kommt nicht überall zu einem Umbrch. Nur da, wo es so ein whitespace gibt. Und das schleicht sich eben „durch die Hintertüre“, wenn im HTML zwischen den Tags eines auftritt, ein. Und zwingt dann eben auch mal ein verwaistes Komma (oder was da sonst sein könnte) in die nächste Zeile. (Was man ja bei meinem Beispiel sehen kann, wenn man mit der Fensterbreite spielt.)
Und ein Flex? Nun, hier war die Absicht, eine Liste „inoffiziell“ zu gestalten. Also nicht (das da vorgesehene) „offiziel“. Also z. B. eine Aufstellung auf einem Lieferschein.
Lieferschein: 1 Dings á Preis 2 Dingens á Preis --- ∑ GesamtpreisSondern als Bestandteil von Fließtext:
Brief: Ich hatte bei Ihnen 1 Dings zu Preis und zwei Dingens zu Preis …(Natürlich wäre hier das :after im content anders zu gestalten.)
Da würde sich so ein Flex doch dann auch wieder mit seinem „blockigen“ Charakter quer stellen, nicht „einfach so“ den Text fließen lassen. Obendrein: da man Gaps ja auch nicht mit Kommata füllen kann (was, wenn es ginge, wahrscheinlich besonders seltsam aussehen würde), bleibt ja auch da das Problem prinzipiell bestehen.
-
-
-