文字で幅を指定してください

108

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

（UbuntuのFirefoxとChromiumの結果）

ウィキペディアの記事によると、「em」は必ずしもMの幅とは限らないため、「em」ユニットはこれを信頼できないようです。

css font-size

— マーティン・ビルカンス
ソース

「en」も法的な幅だと思います。タイポグラフィでの数字の幅です。それはあなたのためにうまくいくかもしれません。

— ピートウィルソン、

'em'プロパティは、文字の幅ではなく、フォントのfont-size（高さ）を使用します。@Pete：そうではありません。CSS値と単位モジュールレベル3を参照してください。

— アニムソン

固定幅フォントを使用している場合を除き、文字ごとに幅が異なります。したがって、表示される文字数で幅を設定することは機能的に不可能です。

— エミリー

等幅フォントで一定数の文字に合うように<div>の幅を設定

— Martin Vilcans、

「この質問を閉じるには、まだ他のユーザーからの4票が必要です」-ねえ、それは私の質問です。閉じさせて！

— マーティンVilcans

回答:

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

幅は全く別の問題です...。

上記の例を次のように変更します

<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のみのソリューションの可能な戦略は

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

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

— ゲルト・リーセルマン
ソース

私は純粋なCSSソリューションを望んでいました。これは、文字の高さと幅の比率をたまたま知っている場合にのみ可能です（stackoverflow.com/questions/1255281/…を参照）。これは堅牢なソリューションのように思われるので、これを答えとして受け入れます。

— Martin Vilcans、2011

ここでの回答によると、1emはMの高さではありません。graphicdesign.stackexchange.com/ questions / 4035 /…「|」文字は1emに近いはずです。

— Sogartar

明確にするためのソガルタル：タイポグラフィでは、適切な1 emは実際に固定幅文字の幅（およびemの高さ）です。しかし、それは「タイポグラフィにふさわしい」ものであり、タイポグラフィのルールに準拠していないフォントファイルを作成している夜通しの人がたくさんいます。特にWebフォントの場合はそうです。ここでの私のコメントの要点は、（単なる）惨めさだけの壮大なものではありません。私のポイントは、テスト、テスト、テストです。（そして、さらにテストします。）

— Parapluie

217

`ch` 単位

あなたが探している単位はですch。MDN docsによると：

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

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

例

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

— トランジスタ09
ソース

ウィキペディアのスペース（句読点）の記事で説明されているように、正確に「1桁の幅に等しい」図スペースもあります。Unicode値はU + 2007で、またはを使用してHTMLで入力できます。CSS の単位と機能的に同等ですが、これは広くサポートされていませんが、HTMLの回避策として使用できます（醜いハックですが、機能するはずです）。  ch

— 危険な

実際、このchromiumの問題によれば、Chromeはv27以降でサポートしています。そのため、現時点ではすべての主要なブラウザ（IE、Chrome、Firefox）の最新バージョンがchユニットをサポートしています:)

— 危険な

文字サイズは要素のフォントのグリフ「0」のサイズであることに注意してください。「m」や「w」などの大きな文字が予想される場合は、それに応じて拡張するか、必要に応じて拡張することを検討してください（例：stackoverflow.com/questions/7168727/…）

— user420667

はい、等幅フォントでは問題ありません。

— Willege

IE11はそれを間違ってサポートしています。stackoverflow.com/questions/17825638/...

— aleha

*文字*で幅を指定してください

ch 単位

例

文字で幅を指定してください

`ch` 単位