Geben Sie die Breite in * Zeichen * an

107

Bei Verwendung einer Schriftart mit fester Breite möchte ich die Breite eines HTML-Elements in Zeichen angeben .

Die "em" -Einheit soll die Breite des M-Zeichens sein, daher sollte ich sie verwenden können, um eine Breite anzugeben. Dies ist ein Beispiel:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

Das Ergebnis ist nicht das, was ich wollte, da die Browserzeile nach Spalte 15 und nicht nach 10 unterbrochen wird:

1 3 5 7 9 1 3 5
7 9 1

(Ergebnis in Firefox und Chromium, beide in Ubuntu.)

Der Artikel von Wikipedia besagt, dass ein "em" nicht immer die Breite eines M hat, daher sieht es definitiv so aus, als ob der "em" -Einheit dafür nicht vertraut werden kann.

css font-size Martin Vilcans
quelle
Ich glaube, dass "en" auch eine legale Breite ist; Es ist die Breite einer Ziffer in der Typografie. Das könnte für Sie besser funktionieren.
Pete Wilson
6
Die Eigenschaft 'em' verwendet die Schriftgröße oder -höhe der Schriftart und nicht die Breite der Buchstaben. @Pete: Ist dies nicht der Fall, siehe CSS-Werte und Einheiten Modul Level 3 .
Animuson
Sofern Sie keine Schriftart mit fester Breite verwenden, haben unterschiedliche Zeichen unterschiedliche Breiten. Daher ist es funktional unmöglich, eine Breite in Bezug auf die Anzahl der angezeigten Zeichen festzulegen.
Emily
Mögliches Duplikat von Wie wird die Breite von <div> so eingestellt, dass sie in die Monospace-Schriftart passt?
Martin Vilcans
"Diese Frage benötigt noch 4 Stimmen von anderen Benutzern, um geschlossen zu werden" - Hey, das ist meine Frage! Lass es mich schließen!
Martin Vilcans

Antworten:

23

1em ist die Höhe eines M und nicht die Breite. Gleiches gilt zum Beispiel für die Höhe eines x. Im Allgemeinen sind dies die Höhen von Groß- und Kleinbuchstaben.

Breite ist ein ganz anderes Thema ....

Ändern Sie Ihr Beispiel oben in 

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

und Sie werden feststellen, dass Breite und Höhe der Spannweite unterschiedlich sind. Bei einer Schriftgröße von 20 Pixel in Chrome beträgt die Spanne 12 x 22 Pixel, wobei 20 Pixel die Höhe der Schrift und 2 Pixel die Zeilenhöhe sind.

Da em und ex hier keinen Nutzen haben, wäre eine mögliche Strategie für eine reine CSS-Lösung:

  1. Erstellen Sie ein Element, das nur ein & nbsp;
  2. Lassen Sie es sich automatisch ändern
  3. Platziere dein Div in und
  4. Machen Sie es 10 mal so groß wie das umgebende Element.

Ich habe es jedoch nicht geschafft, dies zu codieren. Ich bezweifle auch, dass es wirklich möglich ist.

Die gleiche Logik könnte jedoch in Javascript implementiert werden. Ich verwende hier allgegenwärtiges jQuery:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

Die +1 in (w * 10 + 1) dient zur Behandlung von Rundungsproblemen.

Gerd Riesselmann
quelle
1
Ich hatte auf eine reine CSS-Lösung gehofft, die nur möglich ist, wenn Sie zufällig das Verhältnis zwischen Höhe und Breite eines Zeichens kennen (siehe stackoverflow.com/questions/1255281/… ). Ich akzeptiere dies als Antwort, da es eine robuste Lösung zu sein scheint.
Martin Vilcans
1em ist nicht die Höhe eines M gemäß den Antworten hier. Grafikdesign.stackexchange.com/questions/4035/… Das "|" Zeichen sollte näher an 1em sein.
Sogartar
1
Sogartar zur Verdeutlichung: In der Typografie ist 1 em tatsächlich die Breite (sowie die em-Höhe) eines Zeichens mit fester Breite. Das ist jedoch "richtige Typografie", und wir haben viele Leute, die nachts fliegen und Schriftdateien erstellen, die nicht den typografischen Regeln entsprechen - insbesondere bei Web-Schriftarten. Der Punkt meines Kommentars hier ist nicht (nur) kurios. Mein Punkt ist: Test, Test, Test. (Und dann noch etwas testen.)
Parapluie
216

ch Einheit

Das Gerät, das Sie suchen, ist ch. Laut den MDN-Dokumenten :

ch: Repräsentiert die Breite oder genauer das Vorwärtsmaß des Glyphen "0" (Null, das Unicode-Zeichen U + 0030) in den Elementen font.

Es wird in aktuellen Versionen der gängigen Browser ( caniuse ) unterstützt.

Beispiel

pre {
    width: 80ch; /* classic terminal width for code sections */
}
Transistor09
quelle
3
Es gibt auch den Figurenraum , der genau "gleich der Breite einer Ziffer" ist, wie im Wikipedia- Artikel " Raum (Interpunktion)" beschrieben. Der Unicode-Wert ist U + 2007 und kann mit &#x2007;oder in HTML eingegeben werden &#8199;. Es entspricht funktional chder CSS-Einheit, wird zwar nicht allgemein unterstützt, kann jedoch als Problemumgehung in HTML verwendet werden (hässlicher Hack, sollte aber funktionieren).
Waldyrious
2
Laut diesem Chrom-Problem unterstützt Chrome es seit Version 27, sodass derzeit die neuesten Versionen aller gängigen Browser (IE, Chrome und Firefox) die ch-Einheit unterstützen :)
waldyrious
2
Man sollte beachten, dass die Zeichengröße die Größe des Glyphen '0' in der Schriftart des Elements ist. Wenn Sie größere Zeichen wie 'm' oder 'w' erwarten, sollten Sie eine entsprechende Erweiterung in Betracht ziehen oder diese nach Bedarf erweitern lassen (z. B. stackoverflow.com/questions/7168727/… )
user420667
1
Ja, keine Probleme mit monospaced Schriftarten.
Willege
2
IE11 unterstützt es falsch. stackoverflow.com/questions/17825638/…
aleha