1

セットのdivボックスに収まるようにテキストをうまく折り返す方法をめぐって争っています。予想される1行に収まらないほど長すぎる場合、ブラウザはテキストを折り返しますが、これは多くの場合、かなり見苦しいプレゼンテーションにつながる可能性があります。

たとえば、これは問題ないように見えます。

This is the title

しかし、私がより長いタイトルを持っている場合、それは次のようにラップされる可能性があります：

This is a slightly longer
title

ご覧のとおり、2つ目はあまり見栄えがよくないので、私が目指しているのは次のようなものです。

This is a nicer
wrapped title

含まれているDIVの大きさはわかっているので、問題のある変数ではありませんが、適切にフォーマットされたタイトルとその欠陥を実現するためのすべての可能な方法に頭を悩ませようとしています。だから問題は、これを行うための最良の方法は何でしょうか？いくつかの方法が考えられますが、2行を超えると、指数関数的に複雑になり始めます。

編集：私は現在これ（https://xnode.org/paste/19 ）を使用して、分割線を均等にしようとしていますが、完璧にはほど遠いと思います。

4

5 に答える 5

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 に答える
0

改行を削除してから、ワードラップ機能を使用できます

于 2012-06-08T12:08:48.227 に答える
0

wordwrap 関数の仕事のように聞こえますhttp://php.net/manual/en/function.wordwrap.php

于 2012-06-08T12:09:33.517 に答える
0

function を使用してみてwordwrap、この CSS を次のように指定しDIVます。

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

http://fittextjs.com/で問題が解決しない場合は、これらの行に沿って何かを試してください...

タイトルの文字数を数えて、1 行、2 行、3 行など必要かどうかを判断します (試行錯誤が必要です)。

改行が必要な場所以外のすべてのスペースを&nbsp;(非改行スペース) に置き換え、ブラウザーにワード ラップを実行させます。

言い換えれば、あなたのThis is a nicer wrapped title例では29文字あるので、途中または直後に改行が必要なので、位置14または15の後の最初の非改行スペースを通常のスペース、つまり「より良い」と「ラップされた」の間で置き換えます'、そしてそれは仕事をするはずです。より長い行の 3 分の 1 または 4 分の 1 で同じこと。

申し訳ありませんがコードはありませんが、上記の例から、独自の実装を考え出すことは問題ありません。

于 2012-06-08T14:10:31.743 に答える