ラインが壊れないとき

通常、テキストが親コンテナの端に達すると、線が壊れます。これは標準的な段落の動作です。ただし、これは単語間のスペースまたは空白に依存しています。 CSSは、ラインブレークに影響を与えるいくつかのプロパティを提供しますが、予想されるブレークが失敗するシナリオに焦点を当てましょう。

ブラウザに明確なブレークインジケーターがない場合はどうなりますか？

「タグリスト」の例を作成してから、ラインブレイクの問題のトラブルシューティングをしましょう。これが最初のHTMLです：

• Php
• JavaScript
• さび

CSSを使用して、リスト項目を水平に配置します。

 ul {
  マージン：0;
  パディング：0;
  リストスタイル：なし;
}

li {
  表示：インライン;
  パディング右：5px;
}

リストは必要に応じて表示されます。それでは、固定幅でdivにリストを巻き付けましょう。

<div class="tags">
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>さび</li>
  </ul>
</div>

.tags {
  幅：200px;
}

問題は次のとおりです。HTMLMinificationはWhitespaceを削除し、次のようになります。

<div><ul>
<li> Php</li>
<li> JavaScript</li>
<li>さび</li>
</ul></div>

ラインは200pxで壊れなくなりました。なぜ？ブラウザは、キャラクターが分離されていないため、リスト全体を単一の壊れていない単語として扱います。パディングはこれを解決しません。リスト全体は単一のエンティティのままです。

特殊文字でラインブレークを強制します

スペース（壊れないスペースを除く）に加えて、いくつかの文字がラインブレークをトリガーします。

• ハイフン（ - ）
• en dashes（ - ）
• emダッシュ（ - ）
• 疑問符（？）
• ゼロ幅スペース（U 200bまたは）

これらの休憩はレンダリング中に発生します。ブラウザはまだテキストを単一のユニットと見なしています。これらのキャラクターのいずれかを使用してリスト項目を追加すると、休憩が必要です。 「Objective-C」を追加しましょう：

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>さび</li>
    <li>Objective-C</li>
  </ul>
</div>

ここに3つの解決策があります。

ソリューション1：ラインブレイクキャラクターを組み込みます

手動でスペースや他のラインブレイクキャラクターを追加します。ただし、ミニファイヤーはこれらを削除する場合があります。

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>さび</li>
    <li>Objective-C</li>
  </ul>
</div>

ソリューション2：擬似要素を利用します

css ::before ::after pseudo-elementsを使用してラインブレイク文字を追加します。ミニファイアは、このCSS付加の白文学を削除しません。ホワイトスペースの崩壊は、このアプローチに影響を与える可能性があることに注意してください。 white-space: pre;必要かもしれません。

ソリューション3： inline-blockを使用します

display: inline-block;リストアイテムの上に、幅のゼロスペースと同様に、視覚的な分離はありません。

ソリューション4：FlexBoxを活用します

display: flex;またはdisplay: inline-flex;に<ul></ul>柔軟なラインラッピングを可能にします。

この問題はあまり一般的ではありませんが、特にMINIFIERを使用したり、白人を変更するプロセスを構築する場合、それを認識していることとそのソリューションを認識してください。多くの最新のツールはこの問題を軽減しますが、根本的な原因を理解することは依然として重要です。

以上がラインが壊れないときの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。