1

我正在争取一种让文本很好地换行以适合设置的 div 框的方法。如果文本太长而无法容纳在预期的一行上，浏览器会自动换行，但这通常会导致看起来相当讨厌的演示文稿。

例如，这看起来不错：

This is the title

但如果我有一个更长的标题，它可能最终会像这样包装：

This is a slightly longer
title

如您所见，第二个看起来并不是很好，我的目标是这样的：

This is a nicer
wrapped title

我知道包含的 DIV 会有多大，所以这不是一个有问题的变量，但我试图围绕所有可能的方法来实现格式良好的标题及其缺陷。所以问题是，这样做的最佳方法是什么？我可以想到几种方法，但如果它包含超过 2 行，它们就会开始变得更加复杂。

编辑：我目前正在使用这个 - https://xnode.org/paste/19 - 尝试平衡分割线，尽管我确信它远非完美。

4

5 回答 5

0

您可以删除换行符，然后使用wordwrap功能

于 2012-06-08T12:08:48.227 回答
0

听起来像是 wordwrap 函数的工作http://php.net/manual/en/function.wordwrap.php

于 2012-06-08T12:09:33.517 回答
0

尝试使用wordwrap函数并将此 CSS 用于DIV：

div {
    text-align: justify;
}
于 2012-06-08T12:15:08.303 回答
0

如果http://fittextjs.com/不能解决问题，请尝试以下方法...

计算标题中的字符并决定是否需要 1 行、2 行 3 行等（将涉及一些试验和错误）

 用（非换行空格）替换除您想要换行的所有空格，并让浏览器进行自动换行。

换句话说，在您的This is a nicer wrapped title示例中，有 29 个字母，因此您需要在中途或之后休息一下，因此将位置 14 或 15 之后的第一个不间断空格替换为常规空格，即在 'nicer' 和 'wrapped '，这应该可以完成工作。对于较长的行，三分之二或四分之二的情况相同。

抱歉没有代码，但从您上面给出的示例中，您应该可以提出自己的实现。

于 2012-06-08T14:10:31.743 回答
0

我已经创建了这个 jQuery 插件，它可以满足你的需求

$.fn.prettyBreak = function () {

    return this.each(function () {

        var element = $(this);

        var elementLineHeight = element.css("line-height").replace("px", "");

        var elementContent = element.contents();

        element.wrapInner("<span style='white-space: nowrap'>");

        element.find("br").remove();

        var textWidth = element.find("span").width();

        element.html(elementContent);

        var elementText = $.trim(element.text());

        if (element.is(":visible") && textWidth > element.width() && element.height() < elementLineHeight * 2.1) {

            var middle = Math.floor(elementText.length / 2);
            var before = elementText.lastIndexOf(" ", middle);
            var after = elementText.indexOf(" ", middle + 1);

            if (middle - before < after - middle) {
                middle = before;
            } else {
                middle = after;
            }

            var s1 = elementText.substr(0, middle);
            var s2 = elementText.substr(middle + 1);

            element.html(s1 + "<br> " + s2); // note the space after the tag

        } else {
            element.html(elementText);
        }

        if (element.is(":visible")) {
            element.css("opacity", 1);
        }

    });
}

用法：

$(document).on("ready", function () {
    $(".pretty-break:visible").prettyBreak();

    setInterval(function () {
        $(".pretty-break:visible").prettyBreak();
    }, 1000);
});

Github 链接：https ://github.com/SumoSoft/PrettyBreak

于 2016-08-09T12:46:43.197 回答