[英]hide element after line-break
我正在嘗試建立一個響應式頁腳,但這對於其他響應式元素也可能很有趣。
如果線在其位置斷開,是否有可能隱藏元素?
<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 Doe<span class="hide-when-linebreak"> · </span>Main Street 123<span class="hide-when-linebreak"> · </span>Sometown<span class="hide-when-linebreak"> · </span>+12 3456 789
</footer>
尚未找到任何解決方案,也許有一個入門思路?
謝謝
您可以使用此JavaScript函數在頁面加載和窗口每次調整大小時動態設置頁腳內容:
$(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(/</, '<') .replace(/([^·])\\s+/g, '$1 '); // 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>' : '· ') : '') + part); height = $footer.height(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer></footer>
您不能基於每個說話的換行符來執行此操作,但是可以使用簡單的媒體查詢獲得幾乎相同的效果。
編輯:看起來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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.