nicht angemeldet
CSS Tab-Size
Gunnar Bittersmann
Matthias Scharwies
Rolf BHallo zusammen,
ich habe folgendes Problem. Ich habe zwei Texte wie unten:
<div>Das ist der erste Texte : 12345</div>
<div>Und hier ist der zweite Text : 12345</div>
Da die Texte und damit die Länge der Texte zur Laufzeit variieren können, müssen die Doppelpunkte immer mit einem passenden Abstand zu den Texten davor untereinander stehen, egal wie lang der Text wird, also:
Das ist der erste Texte : 12345
Und hier ist der zweite Text : 12345
oder
Das ist mein erster Text : 12345
Und hier der zweite Text : 12345
Ich habe mit tab-size versucht. Dies hat nicht das gewünschte Ergebnis gebracht. Und das pass sich nicht an, wenn der Text sich in der Länge ändert:
<div style="white-space:nowrap;"><span style="display:inline-block;width:180px;">Das der erste Texte</span>: 12345</div>
<div style="white-space:nowrap;"><span style="display:inline-block;width:180px;">Und der zweite Texte</span>: 12345</div>
Hat jemand eine Idee? Danke im Voraus.
-
@@Lowterm
Ich habe zwei Texte wie unten:
<div>Das ist der erste Texte : 12345</div> <div>Und hier ist der zweite Text : 12345</div>Was heißt „ich habe“? Ist das Markup von anderen so vorgegeben oder kannst du das Markup ändern?
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“-
Hallo,
alles kann geändert werden. Hauptsache ich habe eine Lösung.
Gruß
-
Servus!
Hallo,
alles kann geändert werden. Hauptsache ich habe eine Lösung.
Evtl so: HTML/Tutorials/Seitenstrukturierung#Das_fertige_Ergebnis
Die Doppelpunkte könntest du auch mit
dt::after{content:':';}erzeugen.Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
@@Matthias Scharwies
Die Doppelpunkte könntest du auch mit
dt::after{content:':';}erzeugen.So, wie sie angeordnet werden sollen, eher mit
dd::before.🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“-
@@Gunnar Bittersmann
Die Doppelpunkte könntest du auch mit
dt::after{content:':';}erzeugen.So, wie sie angeordnet werden sollen, eher mit
dd::before.Oder mit
dl > div::beforeoderdl > div::after. Allerdings muss man dafür die jeweiligegrid-rowangeben – für (mindestens) so viele Elemente wie man in der Liste hat. (Mit CSS-Präprozessor ist das fix gemacht.)grid-row: counter(…)funktioniert nicht – schade eigentlich.☞ Codepen
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“
-
-
Hallo Matthias,
zu beachten ist, dass das nur funktioniert, solange man immer genau 1 dt und 1 dl hat. Es gibt aber auch den Fall, dass man mehrere DT zu einem DD oder ein DT mit mehreren DD hat. In diesem Fall muss man ein div um die dt/dd Gruppe legen, und es wird schwieriger, alle dd untereinander zu haben. Mit einem display:contents auf dem div lässt sich das herbeiführen, aber DANN bekommt man mehr Arbeit, falls man Abstände zwischen den Zeilen will.
Subgrid wäre hier hilfreich, aber da kommen die Chromia ja nicht dem Fuchs hinterher 😟
Rolf
--
sumpsi - posui - obstruxi-
Guten Morgen,
Subgrid wäre hier hilfreich, aber da kommen die Chromia ja nicht dem Fuchs hinterher 😟
Wie immer find' ich auf die Schnelle keine Quelle, aber subgrid scheint von der Chrome-Gang (Bewusst oder ungewollt) ausgebremst zu werden.
Stattdessen gibt es jetzt wohl die Container queries.
https://blog.logrocket.com/cascade-layers-subgrid-container-queries-whats-new-css/
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias,
das Thema Subgrid in Chromium ist nicht tot, aber es sollte Dir im Nacken jucken, wenn Du daran denkst: es ist eine Einmannshow.
Die Subgrid-Commits kommen zumeist von Ethan Jimenez bei Microsoft. Vor 2 Jahren wurde er von einer Ana SollanoKim unterstützt, seit letztem Jahr von Kurt Catti-Schmidt. Alles Microsoft.
Das muss irgendwie in die NG Layout-Engine hinein und es scheint ein komplexes Thema zu sein oder sie sind nicht kompetent genug, denn sie ändern seit Jahren dran rum ohne in eine Releasephase zu kommen.
Quelle: https://bugs.chromium.org/p/chromium/issues/detail?id=618969
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
@@Lowterm
alles kann geändert werden. Hauptsache ich habe eine Lösung.
Ich habe eine Frage: Sind es tabellarische Daten?
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“
-
-
-
Ich würde das folgendermaßen lösen, wobei sich die linke Spalte dem längsten Text anpasst. Da das HTML sehr übersichtlich bleibt kann es leicht gepflegt werden.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Tabellendarstellung</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media all { dl { padding: 0.5rem; border: 2px solid grey; border-radius: 0.5rem; display: grid; grid-template-columns: auto 1fr; } dt { margin: 0rem 0rem 0rem 0rem; } dd { margin: 0rem 0rem 0rem 0.5rem; } dd::before { content:':'; margin-right: 0.5rem; } } </style> </head> <body> <header> <h1>Tabellendarstellung</h1> </header> <main> <dl> <dt>Italien</dt> <dd>Rom</dd> <dt>Großbritannien</dt> <dd>London</dd> <dt>Brunei</dt> <dd>Bandar Seri Begawan</dd> <dt>Bali</dt> <dd>Denpassar</dd> </dl> </main> </body> </html>-
Hallo,
danke. Es hat auch bei mir geklappt.
Gruß
-