BinaryDevelop
  1. ホーム
  2. css

[解決済み] 幅を*文字*で指定する

2022-07-29 18:21:30

質問

を使用する場合 固定幅フォント で、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"という単位は信用できなさそうですね。

どのように解決するのですか?

1em は M の高さであり、幅ではありません。より一般的には、これらは大文字と小文字の高さです。

幅はまったく別の問題ですが......。

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

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

で、spanの幅と高さが違うことがわかると思います。Chromeでfont-sizeが20pxの場合、spanは12x22pxで、20pxはフォントの高さで、2pxは行の高さです。

ここで、em と ex は役に立たないので、CSS だけの解決策として考えられるのは

  1. &nbsp だけを含む要素を作成する。
  2. サイズを自動調整する
  3. divをandの中に配置する。
  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は四捨五入の問題を処理するためのものです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します