javascript - 使用 jQuery 在太长的标题中添加中断

Question

使用 jquery，我想遍历一个父 div 内的所有 h3 标签。可以有 1 个或多个。我必须检查每个标题以确保它不超过 35 个带空格的字符。如果是，我必须<br>在第 35 个字符（也是第 70、第 105 等）之后放置一个。

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

Answer 1

改用 CSS，并使用 35ex 表示 35 个字符。

http://jsfiddle.net/EPft9/

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

Answer 2

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

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

演示：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 个字符，请尝试如下所示的简单迭代，

演示：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);
});