當一條線沒有破裂時

當文本到達父容器的邊緣時，線通常會破裂。這是標準的段落行為。但是，這取決於單詞之間的空間或空格。 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;
}

這是一個問題：HTML縮減消除了空格，導致：

<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>

這是三個解決方案：

解決方案1：合併破線字符

手動添加空格或其他破線字符。但是，微型儀可能會刪除這些。

<div>
  <ul>
    <li>php</li>
    <li>JavaScript</li>
    <li>銹</li>
    <li>Objective-C</li>
  </ul>
</div>

解決方案2：利用偽元素

使用CSS ::before添加線路的字符，然後::after 。微型儀不會刪除此CSS添加的Whitespace。請注意，空格崩潰會影響這種方法。使用white-space: pre;可能是必要的。

解決方案3：使用inline-block

使用display: inline-block;在列表項目上，力斷裂，類似於零寬的空間，但沒有視覺分離。

解決方案4：利用Flexbox

使用display: flex;或display: inline-flex;在<ul></ul>允許靈活的線條包裹。

儘管此問題不太常見，但要意識到它及其解決方案是有價值的，尤其是在使用微型或修改空格的過程時。許多現代工具緩解了這個問題，但是了解根本原因仍然很重要。

以上是當一條線沒有破裂時的詳細內容。更多資訊請關注PHP中文網其他相關文章！