Web フロントエンド設計: HTML では改行を強制しない <nobr> タグの使用コード example_html/css

記事リストのタイトルレイアウトなどのWebページのレイアウトでは、文字数が多くても改行で表示したくないので、強制的に1行で表示する必要があります。これは nobr タグを使用して実現できます。 word-break:keep-all と同じ役割を果たします。 nobrはNo Breakの略で改行禁止を意味します。通常、ブラウザに表示されるドキュメントはブラウザのバナーの下部に到達すると自動的に折り返されますが、テキストが ~ タグに含まれている場合は折り返されません。 www.169it.com によって収集および整理されています

1. nobr 構文

見た目を定義するタグとしてはW3Cでは採用されていません。スタイルシートを使用して改行を防止したい場合は空白でnowrapを指定してください。 nowrap の使用例は次のとおりです。

< nobr >content

改行なしのコンテンツを < に挿入します; nobr> との間で指定できます。このタグは CSS の空白と同じ機能を持ちます。

2. Nobr タグの特徴:

br 改行タグが見つからない場合、コンテンツは 1 行で表示されます。br 改行タグが見つかった場合、コンテンツは自動的に br 改行タグで囲まれます。。

3 1

< ブラウザ'のバナーだけでは十分ではありません、ここでは機能しません改行。

3. HTML nobr のコンテンツ行折り返しコードの例

ここでは、4 行の記事タイトルリストがある場合、CSS の行の高さを 200px に設定します。 ; 4 列のコンテンツの場合 ul li リストレイアウトを使用します。そのうちの 2 つはコンテンツにタグを追加し、1 つの li はコンテンツを追加せず、もう 1 つの li はコンテンツを減らして幅を表示できます。

1. 完全な HTML ソースコード:

5 < title >nobr タグ例 www.169it.com>

< html xmlns = "http://www.w3.org/1999/ xhtml" >

< head >

< meta http-equiv = "Content-Type" content = "text/html-8" />

ul{ border:1px width:200px;}

< nobr >コンテンツをテストするテキスト

< li >< nobr >コンテンツテキストの 2 行目に追加の nobr タグを配置することはできません

< ; li >3 行目のテキストが多すぎるため、nobr タグが追加されていません

< li > 4 行目のテキストが少なすぎます

サンプルコード 2:

< style type = "text/css" >

.AutoNewline

{

width:300px

border:1px

}

< テーブル >

< tr >

< td class = "AutoNewline" >< 行折り返し、行折り返し、行折り返し、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、ラインラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ、行ラップ / tr >

記事ソース: Web フロントエンドデザイン: Html は改行を強制しません

Web フロントエンド設計: HTML では改行を強制しない タグの使用コード example_html/css_WEB-ITnose

Web フロントエンド設計: HTML では改行を強制しないタグの使用コード example_html/css_WEB-ITnose