改行後の要素を隠す

Question

私はレスポンスフッタを作成しようとしていますが、これは他の応答要素にとっても面白いかもしれません。

行がその位置で壊れている場合、要素を非表示にする可能性はありますか？

<footer> 
John Doe · Main Street 123 · Sometown · +12 3456 789 
</footer> 

私は、ワイドスクリーン用にしたい：

John Doe · Main Street 123 · Sometown · 012 3456 789 

そして、例えば小さい画面用：

John Doe · Main Street 123 · Sometown 
012 3456 789 

または

John Doe · Main Street 123 
Sometown · 012 3456 789 

など

したがって、改行が必要なときに分割線が消えると、分割線が消え、線の終わりまたは開始時には見えなくなります。

編集：いくつかの可能なマークアップ

<footer> 
John&nbsp;Doe<span class="hide-when-linebreak"> · </span>Main&nbsp;Street&nbsp;123<span class="hide-when-linebreak"> · </span>Sometown<span class="hide-when-linebreak"> · </span>+12&nbsp;3456&nbsp;789 
</footer> 

は、このための任意の解決策を見つけていない、多分起動する方法のアイデアがありますか？あなたが動的にページのロードやウィンドウのすべてのサイズ変更にフッターの内容を設定するには、このJavaScript関数を使用することができ

Thxを

Answer 1

：

$(window).on('resize load', function() { 
 
    var footer = 'John Doe · Main Street 123 · Sometown · +12 3456 789' + 
 
       ' · jd@example.com · www.example.com'; 
 
    footer = footer.trim().replace(/&/g, '&') // encode HTML entities 
 
          .replace(/</, '&lt;') 
 
          .replace(/([^·])\s+/g, '$1&nbsp;'); // don't allow breaks here 
 
    var $footer = $('footer'); 
 
    var html = ''; // actual content to be put in footer 
 
    var height = 0; // actual height of the footer 
 
    footer.split(/· /).forEach(function (part, i) { 
 
     $footer.html(html + (i ? '· ': '') + part); // try, and see what we get 
 
     // Depending on height increase, place a break or a non-breaking space 
 
     $footer.html(html += (i ? ($footer.height() > height ? '<br>' : '·&nbsp;') : '') 
 
          + part); 
 
     height = $footer.height(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<footer></footer>

Answer 2

あなたはそれを行うことはできません1話あたりの改行に基づいていますが、単純なメディアクエリを使用してもほぼ同じ効果を達成できます。

編集：StackOverflowのブレークポイントでは動作しないように見えます...ここにペンがあります：http://codepen.io/memoblue/pen/oLVEOX

div { 
 
    display: inline; 
 
} 
 

 
@media (max-width: 600px) { 
 
    div { 
 
    display: block; 
 
    } 
 
    .sm-hidden { 
 
    display: none; 
 
    } 
 
}

<footer> 
 
    <div>John Doe · Main Street 123 <span class="sm-hidden">·</span></div><div> Sometown · +12 3456 789</div> 
 
</footer>