Spécifiez la largeur en caractères.

Question

Spécifiez la largeur en caractères.

Demandé el 18 de Novembre, 2011: Quand la question a-t-elle été
9004 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Lorsque vous utilisez un police à largeur fixe j'aimerais spécifier la largeur d'un élément HTML dans le format caractères .

L'unité "em" est censée être la largeur du caractère M, je devrais donc pouvoir l'utiliser pour spécifier une largeur. Voici 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 le navigateur coupe la ligne après la colonne 15, et non 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 indique qu'un "em" n'a pas toujours la largeur d'un M, il semble donc que l'on ne puisse pas faire confiance à l'unité "em" pour cela.

Demandé el 18 de Novembre, 2011 par Martin Vilcans

1 votes

Je crois que "en" est également une largeur légale ; c'est la largeur d'un chiffre en typographie. C'est pourrait de mieux fonctionner pour vous.

Commenté el 18 de Novembre, 2011 par Pete Wilson

7 votes

La propriété "em" utilise la taille de la police, ou le nom de la police. hauteur de la police, pas la largeur des lettres. @Pete : Ce n'est pas le cas, cf. Module Valeurs et unités CSS Niveau 3 .

Commenté el 18 de Novembre, 2011 par animuson

0 votes

À moins que vous n'utilisiez une police à largeur fixe, les différents caractères ont des largeurs différentes. Il est donc fonctionnellement impossible de définir une largeur en termes de nombre de caractères affichés.

Commenté el 18 de Novembre, 2011 par Emily

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

279voto

transistor09 Points 358

`ch` unité

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

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

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

Exemple

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

Répondu el 16 de Mai, 2013 par transistor09 (358 Points )

3 votes

Il y a aussi le espace de figures qui est précisément "égale à la largeur d'un chiffre", comme le décrit le site Wikipedia espace (ponctuation) article. Sa valeur Unicode est U+2007 et il peut être entré en HTML en utilisant   ou   . C'est fonctionnellement équivalent à la ch de CSS, mais bien que cette méthode ne soit pas largement prise en charge, elle peut être utilisée comme solution de contournement dans le langage HTML (ce qui n'est pas très joli, mais devrait fonctionner).

Commenté el 10 de Mai, 2014 par waldir

2 votes

En fait, selon ce problème de chrome Chrome le prend en charge depuis la version 27, de sorte qu'à l'heure actuelle, les dernières versions de tous les principaux navigateurs (IE, Chrome et Firefox) prennent en charge l'unité ch :)

Commenté el 10 de Mai, 2014 par waldir

2 votes

Il convient de noter que la taille du caractère correspond à la taille du glyphe "0" dans la police de l'élément. Si vous vous attendez à des caractères plus grands comme "m" ou "w", vous pouvez envisager d'étendre la taille en conséquence ou de la faire étendre selon les besoins (par ex. stackoverflow.com/questions/7168727/ )

Commenté el 29 de Mars, 2016 par user420667

Afficher 7 autres commentaires

Answer 3

21voto

Gerd Riesselmann Points 585

1em est la hauteur d'un M, et non sa largeur. Il en va de même pour ex, qui est la hauteur d'un x. De manière plus générale, ce sont les hauteurs des lettres majuscules et minuscules.

La largeur est une question totalement différente....

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 du span sont différentes. Pour une taille de police de 20px sur Chrome, le span est de 12x22 px, où 20px est la hauteur de la police, et 2px sont pour la hauteur de ligne.

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

Créer un élément contenant uniquement un &nbsp ;
Laissez-le s'autosaisir
Placez votre div à l'intérieur et
Faites-le 10 fois plus grand que l'élément qui l'entoure.

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

La même logique pourrait toutefois être mise en œuvre en Javascript. J'utilise ici l'omniprésent 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>

Le +1 dans (w * 10 + 1) sert à gérer les problèmes d'arrondi.

Répondu el 20 de Novembre, 2011 par Gerd Riesselmann (585 Points )

1 votes

J'espérais une solution purement CSS, qui n'est possible que si vous connaissez le rapport entre la hauteur et la largeur d'un caractère (cf. stackoverflow.com/questions/1255281/ ). J'accepte cette réponse car elle semble être une solution robuste.

Commenté el 22 de Décembre, 2011 par Martin Vilcans

0 votes

1em n'est pas la hauteur d'un M selon les réponses ici graphicdesign.stackexchange.com/questions/4035/ Le caractère "|" devrait être plus proche de 1em.

Commenté el 14 de Octobre, 2016 par Sogartar

1 votes

Sogartar, pour clarifier : dans la typographie proprement dite, 1 em est effectivement la largeur (ainsi que la hauteur em) d'un caractère de largeur fixe. Cependant, il s'agit là de la "typographie proprement dite" et il y a beaucoup de gens qui créent des fichiers de polices qui ne respectent pas les règles typographiques - ce qui est particulièrement vrai dans le cas des polices Web. Le but de mon commentaire n'est pas (simplement) de faire preuve d'un esprit grincheux. Mon propos est le suivant : test, test, test. (Et ensuite, testez encore un peu).

Commenté el 6 de Décembre, 2016 par Parapluie

Answer 4

0voto

alekwisnia Points 765

Je sais que ce n'est pas la réponse à votre question, mais vous pouvez essayer "white-space:nowrap ;" avec votre div.

Répondu el 18 de Novembre, 2011 par alekwisnia (765 Points )

Answer 5

0voto

Beatriz Oliveira Points 601

Martin, je vois que vous avez des espaces entre les caractères. Notez que les valeurs typiques des caractères d'espacement vont de 1/5-em à 1/3-em, vous devez donc faire les calculs en fonction de cette hypothèse.

Répondu el 18 de Novembre, 2011 par Beatriz Oliveira (601 Points )

Answer 6

-2voto

Jordonias Points 2275

Pourquoi ne pas utiliser une largeur dynamique pour votre div et utiliser php pour insérer une rupture après le nombre de caractères souhaité ? Ce 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 />";
 }
?>

Répondu el 18 de Novembre, 2011 par Jordonias (2275 Points )

Spécifiez la largeur en caractères.

Réponses

`ch` unité

Exemple

Questions en vedette

Top Tags

Prograide.com

Powered by:

Spécifiez la largeur en *caractères*.

Réponses

ch unité

Exemple

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

Spécifiez la largeur en caractères.

`ch` unité