Question

我有一个函数可以根据逗号分隔逐行打破地址。我只需要在窗口低于750px时运行它并将文本返回到750px以上的一行。我有以下功能打破文本：

var fixed = $('.location-header > p').text();
var address = fixed.substring(0, fixed.lastIndexOf(',')).replace(/,/g, "<br />") + fixed.substring(fixed.lastIndexOf(','));
$('.location-header > p').html(address);

我试图在jquery中使用.resize()函数，但它似乎没有正确触发。

当函数正常运行时，文本应如下所示：

123无处Ln

Suite 200

某处，NY 10009

JSFIDDLE：LINK

Answer 1

最好使用CSS媒体查询（reference）而不是调整回调次数。

您可以在页面加载的回调期间将地址拆分为单独的html元素，然后使用媒体查询更改窗口宽度的显示样式。

Answer 2

使用Javascript：在调整大小时，您可以使用$（window）.width（）检查窗口宽度，并相应地中断/取消地址。

JSFiddle：https://jsfiddle.net/mu1zpvoq/

JSFiddle（ES6 + 1行函数）：https://jsfiddle.net/mu1zpvoq/4/

var fixed = $('.location-header > p')[0].innerHTML.replace('/(,)(?=\s{1}\D{2}[^\s][^\d{5,}])/g', "<br />");
var address = fixed.substring(0, fixed.lastIndexOf(',')).replace(/,/g, "<br />");

function breakAddress () {
    $('.location-header > p').html(address)
}

function fixAddress () {
    $('.location-header > p').html(fixed)
}

function toggleAddress () {
    if ($(window).width() < 750) {
        breakAddress()
    } else {
        fixAddress()
    }
}

$(window).on('resize', toggleAddress)
$(document).ready(toggleAddress)

然而你绝对可以用CSS做：

HTML：

<p class="address">
    <span>123 Nowhere Ln</span>
    <span>Suite 200</span>
    <span>Somewhere</span>
</p>

CSS：

.address > span
    display: block

@media all and (min-width: 750px)
    .address > span
        display: inline

    .address > span:after
        content: ', '

窗口上的运行功能调整大小低于特定窗口大小

2 个答案: