Wie kann ich die Breite des Textbereichs in der Anzahl der Zeichen festlegen? (cols-Attribut funktioniert NICHT) ⇐ HTML

[Anonymous]

Ich möchte die Breite von Textbereichen in Bezug auf die maximale Anzahl von Monospace-Zeichen angeben, die sie in jeder Zeile ohne überschüssigen Leerraum oder Überlauf aufnehmen können sollen.

Es gibt ein paar SO ähnliche Fragen, aber die Konsensantwort, nämlich die Verwendung des cols-Attributs, funktioniert definitiv nicht, wie hier gezeigt jsFiddle. Der HTML-Code dafür lautet:

Code: Select all

1

1234567890

12345678901234567890

1234567890123456789012345678901234567890

12345678901234567890123456789012345678901234567890123456789012345678901234567890

Die tatsächliche Breite ist immer wesentlich größer als die erforderliche Breite. (Zumindest in Safari scheint der Überschuss unabhängig vom angegebenen Wert von cols konstant zu bleiben; bei Chrome wächst der Überschuss jedoch mit zunehmendem Wert von cols.)

Ich habe auch versucht, die CSS-Eigenschaft width mit em- und ex-Einheiten zu verwenden. Letzteres führt zu Feldern, die mehrere Zeichen schmaler als nötig sind, während Ersteres zu noch größeren Breiten führt als diejenigen, die sich aus dem cols-Attribut ergeben.

Schließlich habe ich untersucht, wie man die Breite in Ex-Einheiten als die Zahl festlegt, die man durch Multiplizieren der Anzahl der Zeichen mit einem Fudge-Faktor erhält. Das ist nicht nur ekelhaft (wir sollten nicht die Arbeit des Browsers erledigen), sondern auch nicht browserübergreifend: Die Fudge-Faktoren, die ich beispielsweise für Chrome und Safari gefunden habe, sind erheblich unterschiedlich (1,333 vs. 1,415).

Gibt es eine professionelle1 Möglichkeit, dies zu tun?



1d.h. browserübergreifend, ohne Rätselraten, hackfrei, dokumentiert, gut durchdacht usw.