Question

我正在努力让文字很好地适应设置div框。如果文本太长而无法放在预期的一行上，浏览器会对文本进行换行，但这通常会导致相当讨厌的演示文稿。

例如，这看起来很好：

This is the title

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

This is a slightly longer
title

正如你所看到的那样，第二个看起来并不是很好，我的目标是：

This is a nicer
wrapped title

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

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

Answer 1

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

Answer 2

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

的工作

Answer 3

尝试使用wordwrap函数并为DIV提供此CSS：

div {
    text-align: justify;
}

Answer 4

如果http://fittextjs.com/不能解决问题，请尝试沿着这些方向行事......

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

将所有空格与 （不间断空格）的换行符替换，并让浏览器自动换行。

换句话说，在你的This is a nicer wrapped title示例中，有29个字母，所以你需要在中途或之后休息一下，所以用常规空格替换第14或15位后的第一个不间断空格即'更好'和'包裹'之间，这应该做的工作。对于较长的线，在三分之二或四分之一处也是如此。

很抱歉没有代码，但是根据您上面提供的示例，您应该可以提供自己的实现。

Answer 5

我已经创建了这个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

在多行（即标题）上很好地分割文本

5 个答案: