gpt4 book ai didi

javascript - 换行后隐藏元素

转载 作者:搜寻专家 更新时间:2023-10-31 08:25:21 25 4
gpt4 key购买 nike

我正在尝试构建响应式页脚,但这对于其他响应式元素也可能很有趣。

如果行在其位置中断,是否有可能隐藏元素?

<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 函数在页面加载和每次调整窗口大小时动态设置页脚内容:

$(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, '&amp;') // 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>

关于javascript - 换行后隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38993758/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com