web-dev-qa-db-fra.com

Spécifiez la largeur en * caractères *

Lors de l'utilisation d'une police à largeur fixe , j'aimerais spécifier la largeur d'un élément HTML dans caractères.

L'unité "em" est supposée être la largeur du caractère M, je devrais donc pouvoir l'utiliser pour spécifier une largeur. Ceci est un exemple:

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

Le résultat n'est pas ce que je voulais car la ligne du navigateur se rompt après la colonne 15, pas 10:

1 3 5 7 9 1 3 5
7 9 1

(Résultat dans Firefox et Chromium, tous deux dans Ubuntu.)

article de Wikipedia dit qu'un "em" n'est pas toujours la largeur d'un M, il semble donc que l'unité "em" ne peut pas être utilisée pour cela.

cssfont-size
101
Martin Vilcans

1em est la hauteur d'un M plutôt que la largeur. Même chose pour ex, qui est la hauteur d'un x. Plus généralement, ce sont les hauteurs des lettres majuscules et minuscules.

La largeur est un problème totalement différent ....

Changez votre exemple ci-dessus en

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

et vous remarquerez que la largeur et la hauteur de la travée sont différentes. Pour une taille de police de 20 pixels sur Chrome, la plage est de 12 x 22 pixels, 20 pixels de la hauteur de la police et 2 pixels de la hauteur de ligne.

Maintenant qu'em et ex ne sont d'aucune utilité ici, une stratégie possible pour une solution uniquement CSS serait de:

  1. Créez un élément contenant juste un nbsp;
  2. Laissez-le s'autosize
  3. Placez votre div à l'intérieur et
  4. Faites-le 10 fois plus grand que l'élément environnant.

Je n'ai cependant pas réussi à coder cela. Je doute aussi que ce soit vraiment possible.

La même logique pourrait toutefois être implémentée en Javascript. J'utilise jQuery omniprésent ici:

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

Le +1 in (w * 10 + 1) sert à résoudre les problèmes d'arrondi.

22
Gerd Riesselmann

ch unité

L'unité que vous recherchez est ch. Selon le MDN docs :

ch: représente la largeur, ou plus précisément, la mesure avancée du glyphe "0" (zéro, le caractère Unicode U + 0030) dans l'élément font de l'élément.

Il est pris en charge dans les versions actuelles des principaux navigateurs ( caniuse ).

Exemple

pre {
    width: 80ch; /* classic terminal width for code sections */
}
170
transistor09

Pourquoi ne pas utiliser une largeur dynamique pour votre div et utiliser php pour insérer une pause après le nombre de caractères souhaité? Serait quelque chose comme ça.

<?php
 $linelength = (chars per line);
 $data = "1 3 5 7 9 1 3 5 7 9 1";
 $lines = strlen($data) / $linelength;
 $count = 0;
 while($count < $lines) {
  echo substr($data, $count*$linelength, $linelength)."<br />";
 }
 if((strleng($data) % $linelength) > 1) {
  echo substr($data, $lines*$linelength)."<br />";
 }
?>
0
Jordonias