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

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

3 81
css font-size

3 ответа:

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 in (w * 10 + 1) - это решение проблем округления.

18

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

пример

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

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