Question

使用jquery，我想浏览一个父div中的所有h3标签。可以有1个或多个。我必须检查每个标题，以确保它不超过35个字符w /空格。如果是的话，我必须在第35个角色（也是第70个，第105个等）之后加<br>。

在我们对制作标题的脚本进行永久性更改之前，这是一个快速而又脏的修复。任何帮助将不胜感激。

Answer 1

使用CSS代替，并使用35ex代替35个字符。

div.parent h3 {
    max-width: 35ex; //Which should give you 35 characters.
}

Answer 2

方法1：（没有子字符串）

您可以在每个标题内包装一个div，并使用css强制div宽度换行。

DEMO： http://jsfiddle.net/2c4J6/2/

<强> JS：

$('h3').wrapInner('<div class="limitHeader" />');

<强> CSS：

.limitHeader {
    width: 360px; /* Update as your font-style*/
    word-wrap: break-word;
}

方法2：（使用子字符串）

方法1可能不可靠，因为每个字符的宽度不同。所以如果你真的希望它有35个字符，那就试试下面的简单迭代，

DEMO： http://jsfiddle.net/2c4J6/

$('h3').html(function(idx, v) {
    if (v.length > 35) {
        var result = '';
        for (var i = 0; i < (v.length / 35); i++) {
           result += v.substr(35*i, 35) + '<br/>';
        }
        return result;
    }
    return v;
});

Answer 3

更好的解决方案是使用普通的Javascript：

function fixHeader(el) {
var elements = el.getElementsBYTagName("h3");

    for (x in elements) {
        fixHtml(elements[x]);
    }
}

function fixHtml(el) {
var html = "",
    j = 0;

    for (var i = 0; i < el.innerHTML.length; i++) {
        html += el.innerHTML[i];

        if (j > 35) {
            html += "<br />";
            j = 0;
        }

        j++;
    }
}

您可以通过调用fixHeader（yourElement）来使用此功能。

更好的解决方案当然是CSS ..你可以创建一个宽度为的内部元素。

<div>
    <div style="width:100px;">My superduper long text which is absolutely to long and definitly needs breaks.</div>
</div>

您可以通过增加宽度来调整字符数。

如果你真的想使用jQuery ......：

$(el).find("h3").each(function() {
    var html = $(this).html(),
    j = 0,
    new_html = "";

    for (var i = 0; i < html.length; i++) {
        new_html += html[i];

        if (j > 35) {
            new_html += html[i];
            j = 0;
        }

        j++;
    }

    $(this).html(new_html);
});

使用jQuery将break添加到标题中太长了

3 个答案: