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>

Haven没有找到任何解决方案，也许有一个想法如何开始？

Thx

Answer 1

您可以使用此JavaScript函数在页面加载和窗口的每次调整大小时动态设置页脚内容：

＆＃13;

$(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();
    });
});

＆＃13;

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

＆＃13;

Answer 2

你不能根据每个说法的换行符来做到这一点，但你可以使用简单的媒体查询实现几乎相同的效果。

编辑：看起来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>

换行后隐藏元素

2 个答案: