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

改行なしの HTML 表示

HTML では、デフォルトでテキストが自動的に折り返されます。ブラウザ ウィンドウの端または設定された幅に達すると、自動的に折り返されます。しかし、テキストを折り返さないようにしたい場合もあります。 . どうやって? どうすればいい?

改行なしで表示するためのいくつかの方法を次に示します:

1. タグを使用します

タグは次のとおりです。 HTML テキストが自動的に折り返されるのを防ぐ非標準タグ。

例:

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

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

ただし、 タグは HTML5 では非推奨となり、推奨されなくなったことに注意してください。

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 に設定されている場合にのみ有効であることに注意してください。

まとめ

上記3つの方法でもHTMLでの非行折り返し表示を実現できますが、規格に準拠し実現できるCSSの空白属性を使用することを推奨します。非行折り返し。テキストの折り返しも制御できます。また、 タグは非推奨になっているため、使用しないようにしてください。

以上が改行なしのHTML表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。