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

При использовании шрифта фиксированной ширины, я хотел бы указать ширину элемента 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" не всегда является шириной M, поэтому он определенно выглядит так, как будто "em" может 't быть доверенным для этого.

Ответы

Ответ 1

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

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

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

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

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

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

  • Создайте элемент, содержащий только a & nbsp;
  • Позвольте авторизовать себя
  • Поместите свой div внутри и
  • Сделайте его в 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 in (w * 10 + 1) предназначен для решения проблем округления.

Ответ 2

Единица ch. Не поддерживается широко, если MDN является правильным. Он поддерживается в текущих версиях основных браузеров.

Пример

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

Ответ 3

Почему бы не использовать динамическую ширину для вашего 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 />";
 }
?>