0

下記div要素を、どのような画面幅でも常に一行となるようフォントサイズ調整したいのですが、どうすれば良いでしょうか?

<div><a href="">動的に生成する任意のリンクテキスト</a> 文字列 <a href="">動的に生成する任意のリンクテキスト</a></div>
2
  • 文字を最小にしても、一行に収まらない画面幅だった場合どうすればよろしいですか?
    – keitaro_so
    Commented 2017年10月31日 5:05
  • その場合は取り敢えず最小フォントサイズ10pxに設定したいです。後で「on-ze.com/archives/3674」のような処理を加えるか、あるいは文字数減少で対応したいと考えています
    – re9
    Commented 2017年11月1日 3:58

1 件の回答 1

0

画面サイズによってcssを調整するプラグインを作ったことがありますので参考になればと
https://github.com/kamem/jquery.flexibleCssSize

プラグインを使って作ったサンプルです。
http://jsdo.it/kamem/oOjHInternet Archive

プラグインを読み込み下記のように書くと画面サイズによってcssを変更できます。
standardに一行で収まる画面幅をいれてください。

$(".text").flexibleCssSize({
    css: "font-size",
    content : $(window),
    minParcent : 0, // 最小
    minSize: 6,
    maxParcent : 10, //最大
    standard : 385 // 一行でおさまる幅をいれる
});

下記cssをいれることでもしも一行でおさまらなかった場合は[...]とすることができます。

.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }
1
  • こんなプラグインあったのですね(初めて知りました)。1行でおさめることを希望していたのですが、現実的な解決策としては、おさまらなかった場合は[...]とすることが適当なのかな、と思いました
    – re9
    Commented 2017年11月1日 4:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。