Frage zu Scrollbar

[AugustQ]

Hi,

ich habe mal wieder eine Frage:

ich habe eine Box, in der ich Texte als quasi-Zitat darstellen möchte. So habe ich diese definiert:

blockquote.zitat {
    background-color: #f0f0f0;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    margin-right: 50px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 3px solid #ccc;
    max-height; 150px;
    overflow: auto;
} 

Nun zitiere ich meinen Text:

<blockquote class="zitat">timestamp,latitude,longitude,surface_classification_paving,
surface_classification_asphalt,surface_classification_standing,
surface_classification_compacted,distance,surface_anomaly,humidity,
finedust_pm10,temperature,finedust_pm2_5,finedust_pm4,surface_classification_sett,
finedust_pm1,overtaking<br/>
2025-08-03 12:59:18.120,50.0571599,8.3027395,0.07,0.84,0.09,0.00,
0.00,0.00,51.67,3.06,21.38,3.06,3.06,0.00,2.90,0.05<br/>

usw.

Die Darstellung hier ist jetzt auch schwierig: das sind 2 Zeilen Text. Erste Zeile soll die Überschrift sein, die folgende Zeile stellt einen Datensatz dar. Ist eine Datei im typischen CSV-Format.

Edit Rolf B: Ich habe versucht, das zu formatieren

Wie man sieht ist die erste Zeile zu lang. Es sieht hässlich aus, wenn die erste Zeile in der Box über 3 Zeilen geht. Ich hätte gerne nur eine Zeil daraus gemacht.

Wie kriege ich da jetzt einen Scrollbar rein in mein blockquote?

Schönen Gruß AugustQ

PS: ja, es sieht auch mit einer Zeile hässlich aus, aber so sind nun mal meine Daten.

[Ryuno-Ki]

Moin AugustQ,

Die Darstellung hier ist jetzt auch schwierig: das sind 2 Zeilen Text. Erste Zeile soll die Überschrift sein, die folgende Zeile stellt einen Datensatz dar. Ist eine Datei im typischen CSV-Format.

Würde ich versuchen mit

blockquote.zitat:first-line {
  font-weight: bold;
}

Wie man sieht ist die erste Zeile zu lang. Es sieht hässlich aus, wenn die erste Zeile in der Box über 3 Zeilen geht. Ich hätte gerne nur eine Zeil daraus gemacht.

blockquote.zitat {
  white-space: nowrap;
}

scheint für mich den Effekt zu erzielen.

Wie kriege ich da jetzt einen Scrollbar rein in mein blockquote?

blockquote.zitat {
  overflow-x: auto;
}

sollte die Scrollbar bei Bedarf einblenden.

Gruß,

[Rolf B]

Hallo André,

da hast Du Dich vertippt (hoffe ich). ::first-line ist ein Pseudoelement und braucht 2 Doppelpunkte. :first-line wäre eine Pseudoklasse, die es aber nicht gibt.

Rolf

[Ryuno-Ki]

Moin Rolf,

da hast Du Dich vertippt (hoffe ich). ::first-line ist ein Pseudoelement und braucht 2 Doppelpunkte. :first-line wäre eine Pseudoklasse, die es aber nicht gibt.

Du hast selbstverständlich Recht. Danke für den Hinweis,

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

blockquote.zitat

Der Selektor ist unnötig spezifisch; es sollte besser .zitat sein.

Dann passt er auch noch, wenn der Elementtyp korrigiert wird.

Die Benennung der Klasse als "zitat" macht auch keinen Sinn, wenn es kein Zitat ist.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

blockquote.zitat

Der Selektor ist unnötig spezifisch; es sollte besser .zitat sein.

Kommt auf den Kontext an.

Dann passt er auch noch, wenn der Elementtyp korrigiert wird.

Die Benennung der Klasse als "zitat" macht auch keinen Sinn, wenn es kein Zitat ist.

Tut jetzt auch nichts Näheres zur Sache, wenn es um das Verständnis des benötigten CSS geht.

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

Der Selektor ist unnötig spezifisch; es sollte besser .zitat sein.

Kommt auf den Kontext an.

Selektoren nur so spezifisch wie nötig zu machen, ist eine allgemeine Regel.

Die Benennung der Klasse als "zitat" macht auch keinen Sinn, wenn es kein Zitat ist.

Tut jetzt auch nichts Näheres zur Sache, wenn es um das Verständnis des benötigten CSS geht.

Hier im Forum geht es immer um das Verständnis des Ganzen. Oftmals sind die ungefragten Hinweise noch wertvoller als die Antworten auf die ursprüngliche Frage.

🖖 Live long and prosper

[AugustQ]

normalerweise verwende ich dies für Zitate. D.h. in der letzten Zeile steht dann der Verweis auf die Quelle.

Ich dachte mir, verwende ich das gerade mal so mit.

[Gunnar Bittersmann]

@@AugustQ

normalerweise verwende ich dies für Zitate. D.h. in der letzten Zeile steht dann der Verweis auf die Quelle.

Du zeichnest Zitate also so aus?

<blockquote>
  „Die Philosophen haben die Welt nur verschieden interpretiert;
  es kommt aber darauf an, sie zu verändern.“<br/>
  — Karl Marx
</blockquote>

Das ist nicht richtig; die Quelle gehört nicht mit ins blockquote-Element. Finde ich auch blöd, ist aber so. [Spec]

Korrekt ist^[1]

<blockquote>
  „Die Philosophen haben die Welt nur verschieden interpretiert;
  es kommt aber darauf an, sie zu verändern.“
</blockquote>
<p>
  — Karl Marx
</p>

🖖 Live long and prosper

---

1. Wobei Puristen argumentieren könnten, dass die Anführungszeichen auch nicht mit zum Zitat gehören. Also mit CSS generiert: Beispiel ↩︎

[Ryuno-Ki]

Moin Gunnar,

Korrekt ist^[1]

Ist ja auch so (die Fußnote). Hängt von der Sprache ab, was für quotes genutzt werden.

MDN hat da ein schönes Beispiel für. Die Spec erwähnt insbesondere das Inline-Zitat-Element <q> als ein Beispiel.

Gruß,

---

1. Wobei Puristen argumentieren könnten, dass die Anführungszeichen auch nicht mit zum Zitat gehören. Also mit CSS generiert: Beispiel ↩︎

[Gunnar Bittersmann]

@@Ryuno-Ki

Ist ja auch so (die Fußnote). Hängt von der Sprache ab, was für quotes genutzt werden.

MDN hat da ein schönes Beispiel für.

Hab ich auch. Sogar für verschachtelte Zitate: Language in язык in שפראך in 語言. (Die ersten drei Minuten im Video waren einfach nur Spaß. 😄)

Und das in der Fußnote verlinkte Beispiel zeigt auch unterschiedliche Anführungszeichen für Deutsch und Englisch.

Die Spec erwähnt insbesondere das Inline-Zitat-Element <q> als ein Beispiel.

CSS-generierte Anführungszeichen sind so’ne Sache. Bei copy & paste gehen sie verloren.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Language in язык in שפראך in 語言. (Die ersten drei Minuten im Video waren einfach nur Spaß. 😄)

Die musikalische Einlage war ein Zitat (um beim Thema zu bleiben 😉) aus meiner Präsentation ein Jahr zuvor: Save the Last Dance Talk for Me.

Das war die Präse mit dem klingonischen Titel: nuqjatlh. Da ging’s um RDF(a) und Schema.org. Und auch da waren ersten drei Minuten im Video einfach nur Spaß. 😄

🖖 Live long and prosper

[MudGuard]

Hi,

ich habe eine Box, in der ich Texte als quasi-Zitat darstellen möchte. Nun zitiere ich meinen Text: `<blockquote class="zitat" >timestamp,latitude,longitude,surface_classification_paving, surface_classification_asphalt,surface_classification_standing, surface_classification_compacted,distance,surface_anomaly, humidity,finedust_pm10,temperature,finedust_pm2_5,finedust_pm4, surface_classification_sett,finedust_pm1,overtaking<br/> 2025-08-03 12:59:18.120,50.0571599,8.3027395,0.07,0.84,0.09,0.00, 0.00,0.00,51.67,3.06,21.38,3.06,3.06,0.00,2.90,0.05<br/> usw.

Die Darstellung hier ist jetzt auch schwierig: das sind 2 Zeilen Text. Erste Zeile soll die Überschrift sein, die folgende Zeile stellt einen Datensatz dar. Ist eine Datei im typischen CSV-Format.

Das schreit doch geradezu nach einer Tabelle (erste Zeile als thead), der Rest dann als tbody.

jeweils an den Kommata aufgesplittet in die th (für die erste Zeile) und die td für die folgenden Zeilen.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

ob eine Darstellung als Tabelle sinnvoll ist, hängt vom Zweck ab. Wenn der Besucher diesen Block kopieren können soll, stört das Markup drumherum.

Andrés Ansatz finde ich gut, vor allem das ::first-line

Rolf

[MudGuard]

Hi,

ob eine Darstellung als Tabelle sinnvoll ist, hängt vom Zweck ab. Wenn der Besucher diesen Block kopieren können soll, stört das Markup drumherum.

Dann legt man noch einen Button daneben/darunter/darüber, der per JS den Originaltext ins Clipboard wirft.

Dann spart sich der User das Selektieren des Texts …

cu,
Andreas a/k/a MudGuard

[AugustQ]

ich wollte die CSV-Daten so darstellen, wie diese Box sie in eine Datei schreibt.

[Tabellenkalk]

Hallo,

ich wollte die CSV-Daten so darstellen, wie diese Box sie in eine Datei schreibt.

Warum?

CSV ist ein Datenaustauschformat, d.h. für Computer prima lesbar. Wenn du sie so darstellen willst, hast du denn einen Computer, der da draufguckt?

Mit anderen Worten: für wen oder was möchtest du sie darstellen?

Gruß
Kalk

[Der Martin]

Mahlzeit,

CSV ist ein Datenaustauschformat, d.h. für Computer prima lesbar.

aber auch als solches nicht unproblematisch, weil die Spezifikation schwammig ist:

• Datensatz-Delimiter (Zeilenumbrüche) können CR/LF sein (Windows) oder auch nur LF (Unixoide)
• Feld-Delimiter können Komma, Semikolon, Tabstopps oder ein beliebiges anderes Zeichen sein
• es ist komplett offen, wie Datensatz-Delimiter oder Feld-Delimiter maskiert werden sollen, wenn sie im Feldinhalt auftreten
• manche Programme erzeugen und erwarten Feldinhalte in Anführungszeichen, andere interpretieren Anführungszeichen als Teil des Feldinhalts

Solange sich also die Datenquelle und die weiterverarbeitende Software über diese strittigen Punkte einig sind, ist CSV ein brauchbares Austauschformat. Aber nicht universell.

Einen schönen Tag noch
 Martin

[klawischnigg]

Hi there,

CSV ist ein Datenaustauschformat, d.h. für Computer prima lesbar.

aber auch als solches nicht unproblematisch, weil die Spezifikation schwammig ist:

• Datensatz-Delimiter (Zeilenumbrüche) können CR/LF sein (Windows) oder auch nur LF (Unixoide)
• Feld-Delimiter können Komma, Semikolon, Tabstopps oder ein beliebiges anderes Zeichen sein
• es ist komplett offen, wie Datensatz-Delimiter oder Feld-Delimiter maskiert werden sollen, wenn sie im Feldinhalt auftreten
• manche Programme erzeugen und erwarten Feldinhalte in Anführungszeichen, andere interpretieren Anführungszeichen als Teil des Feldinhalts

Ja, aber auch der Umstand, daß Du keine Information über den Zeichensatz resp. die Codierung mitgeben kannst kann sich als Nachteil erweisen...

[Gunnar Bittersmann]

@@klawischnigg

Ja, aber auch der Umstand, daß Du keine Information über den Zeichensatz resp. die Codierung mitgeben kannst kann sich als Nachteil erweisen...

Im Prinzip ja.

Aber: Wer irgendeinen anderen Zeichensatz als Unicode verwendet, macht was falsch.

Und wer im Web eine andere Zeichencodierung als UTF-8 verwendet, macht was falsch.

Von daher kann man von UTF-8-codierten Daten ausgehen. Und wenn die Annahme falsch sein sollte, dann wäre das zu beheben, sodass die Annahme stimmt.

🖖 Live long and prosper

PS: Allerdings … wer CSV anstatt JSON als Datenformat verwendet, verwendet womöglich auch noch eine ISO-8859-Codierung.

[klawischnigg]

Hi there,

@@klawischnigg

Ja, aber auch der Umstand, daß Du keine Information über den Zeichensatz resp. die Codierung mitgeben kannst kann sich als Nachteil erweisen...

Im Prinzip ja.

Aber: Wer irgendeinen anderen Zeichensatz als Unicode verwendet, macht was falsch.

Ja, aber das kann man sich leider nicht immer aussuchen, vor allem, gerade "Austauschformate" kommen wie der Name schon vermuten läßt, oft von Quellen, auf deren Erstellung man prinzipbedingterweise keinen Einfluß hat. Ich hab Kunden, die verwenden seit 30 Jahren das gleiche Buchhaltungsprogramm - ok, da weiß ich natürlich, was da wie daherkommt, aber das muß keineswegs immer so sein.

Und wer im Web eine andere Zeichencodierung als UTF-8 verwendet, macht was falsch.

Wer im Web eine CSV-Datei verwendet macht sowieso was falsch. Für alles andere gilt oben Gesagtes.

[...]dann wäre das zu beheben, sodass die Annahme stimmt.

wenn das Leben ein Wunschkonzert wäre...

[Ryuno-Ki]

Moin klawischnigg,

Wer im Web eine CSV-Datei verwendet macht sowieso was falsch. Für alles andere gilt oben Gesagtes.

Schau mal, Open Food Facts macht etwas falsch.

Mir ist CSV da lieber als mit einer MongoDB zu jonglieren.

Mit anderen Worten: Bitte nicht so elitär.

Gruß,

[klawischnigg]

Hi there,

Wer im Web eine CSV-Datei verwendet macht sowieso was falsch. Für alles andere gilt oben Gesagtes.

Schau mal, Open Food Facts macht etwas falsch.

Kann sein, ich tippe eher auf irgendeine Altlast, weil sie die gesamte DB offenbar auch in einem aktuelleren Format exportieren.

Mir ist CSV da lieber als mit einer MongoDB zu jonglieren.

Naja, da kommt mir spontan der Obstkorb ins Gehirne, so irgendetwas mit Äpfel und Birnen.

Mit anderen Worten: Bitte nicht so elitär.

Ich fass' das jetzt einmal satirisch auf...

[Ryuno-Ki]

Moin Gunnar,

Aber: Wer irgendeinen anderen Zeichensatz als Unicode verwendet, macht was falsch.

Und wer im Web eine andere Zeichencodierung als UTF-8 verwendet, macht was falsch.

Das ist ausgesprochen euro-zentrisch gedacht. Für CJK (Chinesisch, Japanisch, Koreanisch) mag es unter Umständen nicht ausreichend sein (weswegen dann UTF-16 genutzt wird).

In dem vorliegenden Fall aber nicht von Belang.

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

Und wer im Web eine andere Zeichencodierung als UTF-8 verwendet, macht was falsch.

Das ist ausgesprochen euro-zentrisch gedacht. Für CJK (Chinesisch, Japanisch, Koreanisch) mag es unter Umständen nicht ausreichend sein (weswegen dann UTF-16 genutzt wird).

Das ist Quatsch. Sowohl UTF-8 als auch UTF-16 sind Unicode-Codierungen (deswegen das U in UTF – Unicode Transformation Format). Mit beiden kann man den gesamten Unicode-Zeichensatz codieren.

🖖 Live long and prosper

[Rolf B]

Hallo André,

Da verwechselt du Zeichensatz (Unicode) und Zeichencodierung. Von denen gibt's einige, die aber alle (außer utf8mb3 in mysql) den vollständigen Unicode darstellen können.

UTF-8: 1-4 Bytes/Zeichen. Das Niederwertigste immer zuerst. Gelegentlich auf 3 Byte pro Zeichen kastriert (MySQL). Mit oder ohne BOM.

UTF-16: 2 Bytes/Zeichen in der BMP, 4 Bytes darüber. Mit oder ohne BOM. Little oder Big Endian.

UTF-32: immer 4 Bytes/Zeichen. Mit oder ohne BOM. Little oder Big Endian.

Was der Browser anzeigt und ins Clipboard stellt, ist immer Unicode, codiert nach Maßgabe des verwendeten Betriebssystems.

Rolf

[Gunnar Bittersmann]

@@Rolf B

UTF-16: […] Mit oder ohne BOM.

UTF-16 immer mit BOM.

UTF-16LE und UTF-16BE immer ohne BOM.

Dito für UTF-32.

🖖 Live long and prosper

[MudGuard]

Hi,

Und wer im Web eine andere Zeichencodierung als UTF-8 verwendet, macht was falsch.

Das ist ausgesprochen euro-zentrisch gedacht. Für CJK (Chinesisch, Japanisch, Koreanisch) mag es unter Umständen nicht ausreichend sein (weswegen dann UTF-16 genutzt wird).

ausreichend schon, weil ja, wie bereits erwähnt, alle Zeichen darstellbar sind, sowohl mit UTF-8 als auch mit UTF-16.

Was aber sein kann: ggf. braucht der gleiche Text in UTF-8 mehr Bytes als in UTF-16 - wenn überwiegend Zeichen vorkommen, die in UTF-8 3 oder 4 Bytes brauchen, in UTF-16 aber nur 2 …

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

das habe ich gerade wieder aufgefrischt. 3 Bytes in UTF-8 sind 16 Bit für den Codepoint.

Daraus folgt: was in UTF-8 4 Bytes braucht, liegt jenseits der BMP und braucht auch in UTF-16 4 Bytes (ein Surrogatpaar).

Ich habe keine Ahnung, ob die CJK-Schriften ihre Zeichen schwerpunktmäßig in der BMP haben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich habe keine Ahnung, ob die CJK-Schriften ihre Zeichen schwerpunktmäßig in der BMP haben.

Siehe Unicode / Charts unter East Asian Scripts. Tooltips zeigen beim Drüberhovern die Unicode-Bereiche an; hexadezimal vierstellig ist die BMP.

Hanzi/Kanji gibt’s zuhauf in der BMP, die Erweiterung A liegt sogar noch davor, die Erweiterungen B bis J sind jenseits der BMP.

Auch Hiragana und Katakana sowie Hangul sind in der BMP.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Der,

Solange sich also die Datenquelle und die weiterverarbeitende Software über diese strittigen Punkte einig sind, ist CSV ein brauchbares Austauschformat. Aber nicht universell.

Deswegen nutze ich zum Auswerten eine Bibliothek wie Papa Parse.

Gruß,

[Gunnar Bittersmann]

@@AugustQ

ich habe eine Box, in der ich Texte als quasi-Zitat darstellen möchte.

Was ist ein Quasi-Zitat?

Nun zitiere ich meinen Text:

<blockquote class="zitat">timestamp,latitude,longitude,surface_classification_paving,
surface_classification_asphalt,surface_classification_standing,
surface_classification_compacted,distance,surface_anomaly,humidity,
finedust_pm10,temperature,finedust_pm2_5,finedust_pm4,surface_classification_sett,
finedust_pm1,overtaking<br/>
2025-08-03 12:59:18.120,50.0571599,8.3027395,0.07,0.84,0.09,0.00,
0.00,0.00,51.67,3.06,21.38,3.06,3.06,0.00,2.90,0.05<br/>

Nö, das ist kein Zitat. Das blockquote-Element ist dafür falsch.

Verwende einen passenden Elementtypen: div? Womöglich passt figure?

🖖 Live long and prosper

[Tabellenkalk]

Hallo,

Verwende einen passenden Elementtypen: div? Womöglich passt figure?

mir scheint es sich um tabellarische Daten zu handeln. Dafür könnte man das HTML-Konstrukt misbrauchen, das für Tische vorgesehen ist…

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

mir scheint es sich um tabellarische Daten zu handeln. Dafür könnte man das HTML-Konstrukt misbrauchen, das für Tische vorgesehen ist…

Ob das so richtig ist? 😉

Und das sagte ja der Schlammwächter – äh, -waechter – auch schon. Aber vielleicht gibt es ja einen Grund, warum der Kram nicht tabellarisch dargestellt werden soll?

Aber vielleicht gibt es eigentlich gar keinen Grund, warum der Kram überhaupt dargestellt werden soll? Für welchen Zweck und für welche Art von Nutzern ist das gedacht?

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Nö, das ist kein Zitat. Das blockquote-Element ist dafür falsch.

Verwende einen passenden Elementtypen: div? Womöglich passt figure?

Semantisch wäre <pre> wohl am passendsten.

Wie ich an anderer Stelle schrieb, geht das aber an der Frage vorbei.

Gruß,

[AugustQ]

Danke für die Hinweise. Eingefügt habe ich den Hinweis auf die erste Zeile und das overflow-x.

Das hatte ich auch schon gesehen, hat aber bei mir nicht funktioniert (wie man auch sieht).

ein Beispiel, wie das jetzt aussieht.

[JürgenB]

Hallo August,

für wen ist denn die Anzeige? Soll sich da etwa ein Mensch durchwühlen, ohne Ausrichtung am Komma?

Wenn die Anzeige für Menschen gedacht ist, mach daraus eine Tabelle.

Bedenke beim horizontalen Scrollen auch, dass User ohne Touch-Gesten zum horizontalen Scrollen erst mal nach unten scrollen müssen, um zum Scrollbalken zu kommen. Du musst also die Scrollbox auf Anzeigenhöhe begrenzen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Wenn die Anzeige für Menschen gedacht ist, mach daraus eine Tabelle.

Und wenn sie nicht für für Menschen gedacht ist, dann bring das Zeug nicht auf den Bildschirm.

🖖 Live long and prosper

[AugustQ]

welch eine Diskussion habe ich da angestossen.

Ich habe einen Blog. Und der nächste Text darauf beschäftigt sich mit Thema sense:Box, also einer Box, die während einer Radtour Daten sammelt und an OpenSenseMap sendet. Diese Daten kann man auch lokal verarbeiten und ich wollte nur darstellen, wie diese Daten aussehen. Also: zur Illustration.

Zurück zu meiner Frage: Wie kriegt man diese lange Zeile so in einer Box, daß da ein Scrollbalken entsteht?

[JürgenB]

Hallo August,

was meinst du mit "lokal verarbeiten"? Sollen die Daten per C&P in ein anderes Programm übertragen werden? Warum muss man die Daten denn überhaupt sehen? Warum werden die Daten dann nicht direkt abgespeichert?

Gruß
Jürgen

[JürgenB]

Oder willst du nur deinen Blog-Besuchern zeigen, wie das Datenformat aussieht? Dann nimm einfach ein pre-Element mit evtl. width-Angabe und overflow-x: scroll;

Gruß
Jürgen

[Gunnar Bittersmann]

@@AugustQ

Ich habe einen Blog. Und der nächste Text darauf beschäftigt sich mit Thema sense:Box, also einer Box, die während einer Radtour Daten sammelt und an OpenSenseMap sendet. Diese Daten kann man auch lokal verarbeiten und ich wollte nur darstellen, wie diese Daten aussehen. Also: zur Illustration.

Dann lag ich richtig; dafür ist das figure-Element da.

Und da du da Code reintust, wäre das

<figure>
  <code>timestamp,…,overtaking<br/>
    2025-08-03 12:59:18.120,…,0.05</code>
</figure>

Zurück zu meiner Frage: Wie kriegt man diese lange Zeile so in einer Box, daß da ein Scrollbalken entsteht?

Das sagte doch @Ryuno-Ki schon vor etlichen Tagen.

Und wenn du kein <br/> in den Code schreiben willst, aber trotzdem am LF-Zeichen bzw. CR-Zeichen oder einer Kombination von beiden umbrochen werden soll, geht auch das mit white-space: preserve-breaks nowrap – das besser aufs code-Element angewandt, damit du Zeilenumbruch und Einrückung zwischen den Tags <figure> und <code> machen kannst: Beispiel.

Eine Frage hätte ich da noch: Warum willst du deinen Lesern das horizontale Scrollen zumuten anstatt den Code umbrechen zu lassen?

🖖 Live long and prosper