ホームページ >ウェブフロントエンド >htmlチュートリアル >Web フロントエンド設計: HTML では改行を強制しない
Web フロントエンド設計: HTML では改行を強制しない タグの使用コード example_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:54:042210ブラウズ
記事リストのタイトルレイアウトなどのWebページのレイアウトでは、文字数が多くても改行で表示したくないので、強制的に1行で表示する必要があります。これは nobr タグを使用して実現できます。 word-break:keep-all と同じ役割を果たします。 nobrはNo Breakの略で改行禁止を意味します。通常、ブラウザに表示されるドキュメントはブラウザのバナーの下部に到達すると自動的に折り返されますが、テキストが
1. nobr 構文
| < nobr >content | 改行なしのコンテンツを < に挿入します; nobr> と の間で指定できます。このタグは CSS の空白と同じ機能を持ちます。
2. Nobr タグの特徴: br 改行タグが見つからない場合、コンテンツは 1 行で表示されます。br 改行タグが見つかった場合、コンテンツは自動的に br 改行タグで囲まれます。 。 |
1
2
3
| < ブラウザ'のバナーだけでは十分ではありません、ここでは機能しません 改行。
| 3. HTML nobr のコンテンツ行折り返しコードの例 ここでは、4 行の記事タイトルリストがある場合、CSS の行の高さを 200px に設定します。 ; 4 列のコンテンツの場合 ul li リスト レイアウトを使用します。そのうちの 2 つはコンテンツに 1. 完全な HTML ソース コード:
|
2
3
4
| 6 7 8 9 10 11 12 13 14 15 16 17 18 19
< html xmlns = "http://www.w3.org/1999/ xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html-8" /> | < title >nobr タグ例 www.169it.com>
< ul{ border:1px width:200px;}
< < nobr >コンテンツをテストするテキスト < li >< nobr >コンテンツ テキストの 2 行目に追加の nobr タグを配置することはできません < ; li >3 行目のテキストが多すぎるため、nobr タグが追加されていません < li > 4 行目のテキストが少なすぎます
サンプルコード 2:
声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 |