当一条线没有破裂时

当文本到达父容器的边缘时，线通常会破裂。这是标准的段落行为。但是，这取决于单词之间的空间或空格。 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中文网其他相关文章！