Укажите ширину в * символах * - PullRequest
Новая
       7

Укажите ширину в * символах *

98 голосов
/ 18 ноября 2011

При использовании шрифта фиксированной ширины я бы хотел указать ширину HTML-элемента в символах .

Единица «em» должна быть шириной символа M, поэтому я должен иметь возможность использовать ее для указания ширины. Это пример: 

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

Результат не тот, который я хотел, поскольку разрыв строки браузера после столбца 15, а не 10: 

1 3 5 7 9 1 3 5
7 9 1

(Результат в Firefox и Chromium, оба в Ubuntu.)

В статье Википедии говорится, что «em» не всегда является шириной буквы «М», поэтому, похоже, что единице «em» нельзя доверять.

Ответы [ 3 ]

161 голосов
/ 16 мая 2013

ch единица

Единица, которую вы ищете - ch.В соответствии с MDN документами :

ch: представляет ширину или, точнее, предварительную меру глифа "0" (ноль, символ Unicode U +0030) в элементе font.

Поддерживается в текущих версиях основных браузеров ( caniuse ).

Пример 

pre {
    width: 80ch; /* classic terminal width for code sections */
}
22 голосов
/ 21 ноября 2011

1em - высота М, а не ширина.То же самое верно для ex, который является высотой x.Говоря в более общем смысле, это высота заглавных и строчных букв.

Ширина - это совершенно другая проблема ...

Измените приведенный выше пример на 

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

и вы заметите, ширина и высота пролета разные.Для шрифта размером 20px в Chrome диапазон составляет 12x22 px, где 20px - высота шрифта, а 2px - для высоты строки.

Теперь, поскольку em и ex здесь бесполезны, возможноСтратегия для решения только для CSS будет заключаться в

  1. Создать элемент, содержащий только
  2. Позвольте ему автоматически изменить размер
  3. Поместите свой div в и
  4. Сделать его в 10 раз больше окружающего элемента.

Мне, однако, не удалось закодировать это.Я также сомневаюсь, что это действительно возможно.

Та же логика могла бы быть реализована в Javascript.Я использую вездесущий 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>

+1 в (w * 10 + 1) предназначен для решения проблем округления.

0 голосов
/ 19 ноября 2011

Почему бы не использовать динамическую ширину для вашего div и использовать php, чтобы вставить разрыв после желаемого количества символов? Было бы что-то вроде этого. 

<?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 />";
 }
?>
...