2

私のプロジェクトでは、<br>element 内に要素を追加しようとしていますdiv。そのため、2 行目に省略記号を表示できます。

これは、タグをハードコーディングしたフィドルです。br

<div>hellohel<br>lohellohellohellohellohellohellohellohellohellohellohellohellohello</div>

要素の最初の行(ブラウザによってレンダリング)の最後にbrタグを追加しようとしています。div

brページはレスポンシブである必要があるため、タグをハードコーディングしたくありません。また、後でページのサイズが変更されたときにタグを削除しようとしていbrます(そのため、新しい位置に再度追加できます)。

上記の解決策を達成できれば、私の問題は解決されます。他の代替ソリューションがある場合は、共有してください。

PS: 含めるプラグインは探していません。

回答(更新):フィドル

より大きなプロジェクト用に修正されたもの: Fiddle

4

4 に答える 4

4

特定のタスクに対して間違ったツールを使用しようとしているようです。長い行を自動的に折り返すには、word-break: break-all;CSS プロパティを使用します。すべての主要なブラウザーでサポートされています (Opera 12 はサポートしていませんが、Chromium ベースの Opera 15 はサポートしています)。

このメソッドがどの JavaScript メソッドよりも優れている点は、Unicode 文字を適切に処理できることです (そうしないと、各単語の幅を手動で計算し、結果をレンダリングし、幅を検証して、再試行する必要があります。これは、見た目と同じくらいコストがかかります)。 .

デモを機能させるには、削除overflow:hiddenして に変更white-space:pre;しwhite-space:pre-wrapます。

于 2013-07-26T13:27:38.983 に答える
2

まず、Rob's answerを確認してください。JS は、この種の問題を解決するための非常に極端な手段です。

私はあなたのために短いユーティリティ関数を書きました<br>。ellipsisこれにより、2 行目を維持できます。

一般的な仕組みは次のとおりです。

  • モック要素を作成する
  • 1文字ずつ書き始めます
  • 幅が要素よりも大きくなる直前で停止します
  • 要素の HTML を、一致したテキスト + <br />+ 残りのテキストに設定します

コードは次のとおりです。

function appendBR(element){
    var text = element.textContent.split("");
    var width = element.offsetWidth;
    var el = document.createElement("el");
    document.body.appendChild(el);
    while(text.length > 0){
        el.textContent+=text.shift();
        if(el.offsetWidth > width-20){
            element.innerHTML = el.textContent+"<br />"+text.join("");
            document.body.removeChild(el);
            return;
        }
    }    
    document.body.removeChild(el);
}

var container = document.getElementById("first");
appendBR(container);

働くフィドル

ウィンドウのサイズの変更に耐えられるようにする場合は、スクロールするリスナーを (addEventListener を使用し、attachEvent で shimming を使用して) 追加できます。これがそのための実用的なフィドルです。

于 2013-07-26T13:55:08.693 に答える
0

可能であれば、これを省略記号に使用することをお勧めします。

width:80px;
overflow:hidden; 
text-overflow:ellipsis;
white-space:nowrap;

...十分なスペースがない場合、これは文字列の末尾に自動的に追加されます。

于 2013-07-26T13:28:58.027 に答える
0

これがあなたが望む方法であることを願っています..

フィドルを更新しました：

デモを確認する

div {
    min-width: 45px;
    width:40%;
    max-height:40px;
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */;
    overflow:auto;

    text-overflow:ellipsis;
    border: 1px solid green;
    word-break: break-all;
}
于 2013-07-26T13:29:17.497 に答える