下記div要素を、どのような画面幅でも常に一行となるようフォントサイズ調整したいのですが、どうすれば良いでしょうか?
<div><a href="">動的に生成する任意のリンクテキスト</a> 文字列 <a href="">動的に生成する任意のリンクテキスト</a></div>
下記div要素を、どのような画面幅でも常に一行となるようフォントサイズ調整したいのですが、どうすれば良いでしょうか?
<div><a href="">動的に生成する任意のリンクテキスト</a> 文字列 <a href="">動的に生成する任意のリンクテキスト</a></div>
画面サイズによってcssを調整するプラグインを作ったことがありますので参考になればと
https://github.com/kamem/jquery.flexibleCssSize
プラグインを使って作ったサンプルです。
http://jsdo.it/kamem/oOjH (Internet 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;
}