改行なしのHTML表示を実装する方法

例:

<nobr>这是一段不换行的文字</nobr>

ブラウザに表示される効果は次のとおりです: これは改行のないテキストです。

2. CSS の ホワイトスペース プロパティを使用する

CSS のホワイトスペース プロパティを使用すると、要素内の空白文字の表示方法を制御できます。これには、いくつかの共通の値があります。

• normal: 通常の行折り返しルール。
• nowrap: <br> タグが見つからない限り、テキストは折り返されません。
• pre: 空白シーケンスを保持しますが、通常どおりに折り返します (<br> タグまたは明示的に指定された改行が見つかった場合のみ)。
• pre-wrap: 空白シーケンスは維持しますが、行は通常どおり折り返されます。
• pre-line: 空白シーケンスを結合しますが、通常どおり折り返します (<br> タグまたは明示的に指定された改行文字が見つかった場合のみ)。

例:

<p style="white-space:nowrap;">这是一段不换行的文字</p>

上記のコードは、テキストを折り返さずに表示できます。

要素に含まれるテキストを折り返さないようにするには、この要素のスタイルにwhite-space:nowrap;を追加します。

3. CSS の text-overflow プロパティを使用する

CSS の text-overflow プロパティは、テキストがコンテナからオーバーフローした場合の処理​​を指定できます。次の共通の値があります:

• clip: テキストを切り詰め、オーバーフロー部分を表示しません。
• 省略記号: オーバーフロー部分を省略記号に置き換えます。
• string: オーバーフロー部分を指定された文字列に置き換えます。

例:

<p style="width:100px;overflow:hidden;text-overflow:ellipsis;">这是一段会溢出的文字，被省略号替代。</p>

上記のコードは、テキストのコンテナ幅を 100px に設定し、テキストが折り返されないように、はみ出した部分を省略記号に置き換えます。

text-overflow 属性は、空白が nowrap または pre-wrap に設定されている場合にのみ有効であることに注意してください。

まとめ