CSSでの文字数による横幅指定と文字サイズ

Question

WordPressを用いてホームページの作成を行おうとしています。

横幅を文字数で指定したく、CSSにて「width-max:（指定したい文字数）em;」や「width:（指定したい文字数）em;」などを試してみたのですが、希望の文字数の横幅になりませんでした。

フォントサイズを指定した文字数に合わせて可変させるなどの方法があれば知りたいです。

Comments

[maisumakun]

フォントは何を使っていますか？（プロポーショナルフォントの場合、そもそも1文字の幅がバラバラです）

[jade_1020]

フォントは以下のように指定しています。
font-family:"ヒラギノ明朝 ProN W6",
"HiraMinProN-W6",
"HG明朝E",
"MS 明朝",
serif;

[maisumakun]

> 希望の文字数の横幅になりませんでした。

「横幅の設定自体が全く効かない」のでしょうか？それとも、「一定の幅は設定されるけど、それが文字数と合わない」という状況でしょうか？

[jade_1020]

「一定の幅は設定されるけど、それが文字数と合わない」状況です。

なお、上述のフォント指定はきちんと反映しました。

[Zuishin]

逆に letter-spacing:justify を使い、文字間隔の方を調整して背景に合わせる方法はとれませんか？

[hatena19]

現状のHTMLとCSSを提示して議論したほうが、紛れなくすすむと思いますので、提示してください。
指定の文字数で横幅を設定したい目的は、指定の文字数でテキストを折り返し表示したいということですか。
それとも、中身のテキスト幅に親要素の幅を合わせてたいということですか。

[hatena19]

"ヒラギノ明朝 ProN W6" はプロポーショナルフォントなので文字によって幅が異なるということは理解してますか。

Answer 1

どうしてもガチガチにやりたければ、「JavaScriptで表示幅を測って、それを動的に反映する」ような手段しかありません。ブラウザや環境によって、同じ指定をしても描画される状態は変わりえます。

そこまでのコストを掛けるべき場面ではないのであれば、目分量で合わせる、ということになりますが、環境が変われば想定した幅ではない可能性もあります。