31

DIV に複数の単語からなる長いテキスト行があるとします。

こんにちは、親愛なるお客様。私たちのオファーをご覧ください。

DIV には動的な幅があります。上記のテキストをワードラップしたい。現在、折り返しは最初の行の長さを最大化する単語境界で発生します。

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

折り返しが文の境界で発生することをお勧めします。ただ、ラッピングが不要な場合は、ラインはそのままでお願いします。

私の要点を説明するために、さまざまな DIV 幅と、テキストをどのように折り返すかを見てください。

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

単語では、提案された音節境界で単語の折り返しが発生するように、ソフト ハイフンを使用できます。ラッピングが不要な場合、 は表示されません­。ラッピングが必要な場合は、次の­場所で行います。

magnifi­cently

HTMLでワードラップをヒントする類似の方法はありますか?

4

5 に答える 5

36

ハイフンを導入しないため&shy;、単語内または単語<wbr>間で使用します。<wbr>

以下も参照してください。

于 2012-04-19T10:54:31.810 に答える
11

正確ではありませんが、http: //jsfiddle.net/uW4h8/1/に近いです。

簡単に言えば、white-space: nowrap;テキスト コンテナーを設定し、<wbr>必要に応じて単語間に区切りを挿入するために使用する必要があります。

于 2012-04-19T10:54:00.047 に答える
3

改行が許可されない場合は単語間に改行なしスペース U+00A0 (または&nbsp;、文字を入力する便利な方法がない場合) を使用し、それ以外の場合は通常のスペースを使用します。

単語にハイフン「-」が含まれている場合、これは機能しません。また、括弧などの他の文字も同様に問題を引き起こす可能性があります。ブラウザによっては、ハイフンの後に改行を許可するものとして扱うためです。問題に対処するさまざまなテクニックを含む長い論文については、http: //www.cs.tut.fi/~jkorpela/html/nobr.htmlを参照してください。ただし、通常の句読点のみでハイフンのない通常の単語がある場合は、単純なアプローチで問題ありません。

于 2012-04-19T12:58:39.900 に答える