2

CSSでのワードラップに問題があります。としてtd定義した場所があります。私はtdの中に次のようなURLを持っていますwidth300px

http://www.abc.com/testing/testdata/testurl/test/testing.html

を使用するword-wrap: break-wordと、テキストは次のように折り返されます

http://www.abc.com/testing/testdata/tes
turl/test/testing.html

しかし、私は言葉を壊したいです。/tesある行とturl別の行のように。私はそれが欲しい、

 http://www.abc.com/testing/testdata/testurl/
 test/testing.html

親切に助けてください。どんな助けでも大歓迎です。ありがとう。

更新：

URL以外のテキストを取得する可能性もあります。データを中継できないことを意味'/'します。jqueryではなくjavascriptを使用できます。

4

4 に答える 4

3

CSSのみのソリューションは考えられません。ただし、JavaScriptを使用すると、単語区切りの機会タグを追加できます<wbr>。これは、ブラウザに（Internet Explorerを除いて）ブレークを挿入できる場所を通知します。

JavaScript（jQueryを使用）

$('#element').html( $('#element').html().replace(/\//g, '/<wbr>') );

デモ

http://jsfiddle.net/EkfUR/

編集時

私がフィドルを書いている間にあなたはあなたの質問を編集しました。もちろん、式で使用されているものとは別の文字を/使用して、<wbr>-tagに置き換えることもできます。

于 2013-03-01T14:05:09.483 に答える
0

JavaScriptでやってみることができます。

1) 文字列を " / "で分割します。

TD2) 部分文字列を最初から最後まで追加しますが、結果の行は; の幅よりも小さくなります。

3) 大きい場合は、最後のピースを追加せずに次の行に配置します (その<br />前に a を配置します)。

4）分割配列が空になるまでこれを行います。つまり、文字列が必要な行に分割されます。

于 2013-03-01T13:56:19.050 に答える
0

わかりました、おそらくこれはあなたが目にする最悪のアプローチですが、それはうまくいきます...文字列を分割して、次のような空白spanを使用します。:after

span:after{
 content:' ';
    font-size:0;
}

ここに例があります: http://jsfiddle.net/pavloschris/b7qeD/

于 2013-03-01T14:40:50.727 に答える
0

特定のポイントでテキスト部分を分割する.cssには何も表示されません（たとえば、文字「t」の後に行を分割します。

「単語区切り」を検索

caniuse 単語区切り

p {
    -ms-word-break: break-all;
    word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;
 }

あなたの状況に関連する素晴らしいトピックがあります: how-to-prevent-long-words-from-breaking-my-div正規表現でソフトハイフン () を挿入することにより、長い単語を分割する可能性を呼び出します。

于 2013-03-01T13:53:10.413 に答える