jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

レスポンシブに改行タグを無効化 2

前回に引き続き、レスポンシブな環境で、改行タグを効果的に無効化する方法を考えます。前回提案した方法は、大まかに表示幅を設定しました。今回は、表示されているテキストの幅と表示可能領域の幅を厳密に比べます。表示可能領域が、テキスト幅より狭くなるギリギリのところで、改行タグを無効化します。

テキスト幅と表示可能領域の取得

HTML部は前回と類似しています。今回はp要素の内側にspan要素が含まれています。p要素の幅は、通常、画面幅いっぱいです。なので、span要素からテキストの幅を取得します。

<p id = "header-text"><span id = "test">左端から右端まで、長い長い1行が終わって<br id = "brtest" class = "can-br">
    すぐにまた新しい行がそれに続く。</span></p>
//span要素の幅
var spansize = document.getElementById("test").offsetWidth;
//body要素のmargin
var marginsize = parseInt(getComputedStyle(document.body).margin);
//テキストの幅の合計
var length_default = marginsize * 2 + spansize;

ウインドウ幅変更のイベントハンドラ

onresizeというイベントハンドラで、ウインドウ幅を変更するたびに、無名関数内の処理を実行します。

window.onresize = function(){
//テキストの幅+マージンが表示可能領域の幅よりも広いかを確認
  var ans = length_default >= document.documentElement.clientWidth ?  "none":"inline";
  document.getElementById("brtest").style.display = ans;
}

まとめ

今回提案した方法を使うと、様々なテキスト、フォント、フォントサイズに応じて、改行タグが無効化されるタイミングを自動的に制御できます。