web-dev-qa-db-ja.com

*文字*で幅を指定します

固定幅フォントを使用する場合、文字で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>

結果は、ブラウザーの行が10列ではなく15列の後に途切れるため、私が望んでいたものではありません。

1 3 5 7 9 1 3 5
7 9 1

（FirefoxとChromiumの両方でUbuntuの結果。）

Wikipediaの記事 は、「em」は必ずしもMの幅ではないため、「em」ユニットはこのために信頼できないようです。

cssfont-size
101
Martin Vilcans

1emは幅ではなく、Mの高さです。同じことがexにも当てはまります。これはxの高さです。より一般的に言えば、これらは大文字と小文字の高さです。

幅はまったく異なる問題です。

上記の例を変更します

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

スパンの幅と高さが異なっていることに気付くでしょう。 Chromeで20pxのfont-sizeの場合、スパンは12x22 pxです。20pxはフォントの高さで、2pxは行の高さです。

ここでemとexは役に立たないので、CSSのみのソリューションの可能な戦略は

  1. Nbspのみを含む要素を作成します。
  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>

（w * 10 + 1）の+1は、丸めの問題を処理するためのものです。

22
Gerd Riesselmann

chユニット

お探しのユニットはchです。 MDN docs によると：

ch：要素のfont内のグリフ「0」（ゼロ、Unicode文字U + 0030）の幅、より正確には事前測定を表します。

主要ブラウザの現在のバージョンでサポートされています（ caniuse ）。

例

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

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
Jordonias