CSS Tab-Size

[Lowterm]

Hallo 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.

[Gunnar Bittersmann]

@@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?

🖖 Живіть довго і процвітайте

[Lowterm]

Hallo,

alles kann geändert werden. Hauptsache ich habe eine Lösung.

Gruß

[Matthias Scharwies]

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

[Gunnar Bittersmann]

@@Matthias Scharwies

Die Doppelpunkte könntest du auch mit dt::after{content:':';} erzeugen.

So, wie sie angeordnet werden sollen, eher mit dd::before.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@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::before oder dl > div::after. Allerdings muss man dafür die jeweilige grid-row angeben – 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

🖖 Живіть довго і процвітайте

[Rolf B]

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

[Matthias Scharwies]

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

[Rolf B]

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

[Gunnar Bittersmann]

@@Lowterm

alles kann geändert werden. Hauptsache ich habe eine Lösung.

Ich habe eine Frage: Sind es tabellarische Daten?

🖖 Живіть довго і процвітайте

[MrMurphy]

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>

[Lowterm]

Hallo,

danke. Es hat auch bei mir geklappt.

Gruß