0

ラップされている可能性のある動的 HTML 文字列を表示するのに十分な最小幅を決定する必要があります。spanワードラップがなければ、これは簡単innerHTMLですoffsetWidth。ただし、改行を強制する方法がわかりません...最も簡単な不完全なアプローチは、すべてのスペースを で置き換えることですが<br/>、行はスペースだけでなくハイフンなどでも折り返すことができます。

だから、基本的には、ブラウザにsthをレイアウトしてもらいたいのです。お気に入り

Max.
word-
wrapped
string
<----->

画面外のどこかで、含まれる最長の単語の幅を測定します。それを行う一般的な方法はありますか？

編集

つまり、改行がない場合:

function computeWidth (str) {  // code to make it off-screen and caching omitted
    var span = document.createElement ('span');
    document.body.appendChild (span);
    span.innerHTML = str;
    return span.offsetWidth;
}

strおそらく で遊んで、改行を強制する同様の関数をどのように記述しspan.styleますか?

4

4 に答える 4

1

CSS work-break/word-wrapとプログラムで挿入されたソフト ハイフン (を使用できます&shy;が、ソフト ハイフンに関するクロス ブラウザーの問題をよくお読みください。 ）、ただし、走行距離は異なる場合があります）、範囲オブジェクトを使用してJavaScriptで幅を決定し、左からのカーソルオフセットを測定します。

ソフト ハイフンの使用をお勧めします。これは、同じブラウザでも、OS や使用する辞書 (OSX の場合) によって単語の区切り方が異なるためです。それが問題にならない場合は、ソフト ハイフンなしで実行できます。

Afaik は、html/js で必要なものを取得するための一般的な方法はありません(フラッシュのようなものを使用している場合は異なります)。

範囲オブジェクト: https://developer.mozilla.org/en-US/docs/Web/API/range

canvas オブジェクトを使用する別のアプローチもありますが、現在のブラウザーでのテキストのレンダリングに影響を与える要因 (フォント、サイズ、カーニング、トラッキングなど) が多すぎるため、正確な結果が得られない可能性があります。

再び別のアプローチは、<pre>タグ /を使用whitespace: pre-wrapし、フォントを通常使用するものに設定し、改行を挿入するか、さらに別のスパン/div/ワードラップで設定されたものからそれらをコピーして、改行をエミュレートします-私はこれをテストしていませんまだですが、機能する場合は、範囲オブジェクトを反復処理するよりも簡単かもしれません。

編集：コメントだけでなく、さらに別の解決策もあります：

コンテナーを幅 1px で開始し、幅を増やして、毎回高さを確認します。高さが減少したら、1 ステップ戻ると、幅が得られます。最も単純な実装では 1px の増加/1px の減少を使用しますが、もちろんバイナリ検索アルゴリズムのようなものを使用して最適化することもできます。 1px ステップで結果が得られます。しかし、それは 1px inc/dec ソリューションが遅すぎる場合のみです ;)

于 2013-09-30T14:51:30.903 に答える
1

CSSword-breakルールを使用します。

CSS の word-break プロパティは、単語内で改行する方法 (または改行するかどうか) を指定するために使用されます。

通常
デフォルトの改行ルールを使用します。
break-all
非 CJK (中国語/日本語/韓国語) テキストの任意の文字間に単語区切りを挿入できます。
keep-all
CJK テキストの単語区切りを許可しません。非 CJK テキストの動作は通常と同じです。

<p style="word-break:break-all;">
    Max.word-wrapped string<----->
</p>

（ソース）

于 2013-09-30T14:44:53.663 に答える
0

試してみてください： 

word-break: break-all;

CSSこのフィドルのようなものに追加するか、ここを読んでください。

于 2013-09-30T14:44:39.473 に答える
0

word-breakプロパティで遊んでみてください。

詳細はこちら: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

于 2013-09-30T14:46:32.737 に答える