空白文字とは何ですか? 空白文字: スペース、タブ、改行 注: HTML を解析するとき、ブラウザはすべての空白文字を 1 つのスペースに結合します HTML 構造に対する空白文字の影響 HTML5 プレースホルダーの 正しく表示できません</h3> <p>構造が悪いと予期しない結果が発生します:</p> <p>ラベルの折り返し:</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><span style="color: #008080">1</span> <span style="color: #008000"><!--</span><span style="color: #008000">文本域结束标签 换行导致placeholder无法正确表示</span><span style="color: #008000">--></span><span style="color: #008080">2</span> <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="5"</span><span style="color: #ff0000"> cols</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> wrap</span><span style="color: #0000ff">="physical"</span><span style="color: #ff0000"> placeholder</span><span style="color: #0000ff">="这是一个多行输入框，输入您的个人描述"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span></pre><div class="contentsignin">ログイン後にコピー</div></div></div> <p>タグの間にスペースがあります:</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>1 <!--文本域标签之间有空格，导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述"> ログイン後にコピー 結果:空白 理由:フォーム領域に次の内容が含まれているためホワイトスペース (スペース、タブ、改行) の場合、テキストエリア内のホワイトスペースはコンテンツとみなされ、プレースホルダー テキストが表示されなくなります。 正しい操作: 1 2 ログイン後にコピー 結果: 席は占有されました! ！ ！ インラインブロックのデフォルトの空白 デフォルトでは、インラインブロック要素間には約「4px」の間隔があります（ブラウザごとにサイズが異なります）。 1 2 item13 item24 item35 item46 item57 ログイン後にコピー 1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none outside none; 7 padding: 10px; 8 background: green; 9 text-align: center;10 }11 ul li {12 display: inline-block;13 *display: inline;14 zoom: 1;15 background: orange;16 padding: 5px;17 }ログイン後にコピー 原因: タグ間の空白文字が原因です。 解決策: この時点で、HTML の構造を変更して、前の li の終了タグを次の li の先頭に接続し、空白文字を削除することができます。 1 2 item1item2item3item4item57 ログイン後にコピー ここをクリックしてデモを試すことができます もちろん、空白文字も文字であり、その削除は CSS スタイルの文字間隔と単語間隔を通じて設定することもできます。詳細は、インラインブロック要素の空白文字 を解決する方法を参照してください。 以下の改行やスペースなど、テキスト内に存在する空白文字 。 <div>They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.div>ログイン後にコピー CSS 属性のwhite-space white-space を使用して、テキスト内の空白文字を処理できます。 : デモ 補足 もう 1 つのポイント: CSS3 には、word-wrap と word-break という 2 つの新しい改行プロパティが追加されました。
