影响显示的标记格式

为什么我看到这两个导航元素在屏幕上显示的方式有所不同？正如你从fiddle可以看到的，未格式化的nav在到达div末尾时并未正确换行，而是通过边界溢出，而格式化标记的行为与我所期望的相同。为什么当HTML中的空白区域应该是没有意义的时候呢？影响显示的标记格式

Fiddle

不换行之间的链接：

<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a><a href="/">Link 5</a><a href="/">Link 6</a><a href="/">Link 7</a><a href="/">Link 8</a>    </nav>

换行之间的链接：

<nav class="service__nav"> 
    <a href="/">Link 1</a> 
    <a href="/">Link 2</a> 
    <a href="/">Link 3</a> 
    <a href="/">Link 4</a> 
    <a href="/">Link 5</a> 
    <a href="/">Link 6</a> 
    <a href="/">Link 7</a> 
    <a href="/">Link 8</a> 
</nav>

来源

2016-07-19 noclist

格表示一个单词的结尾。未格式化的HTML不换的原因是：

有元素之间没有空格，指示字的一端，使得浏览器不打破他们之间的线路：
```
<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a> 
```
的<a>元素都有空间，但no-wrap告诉浏览器不打破它们内部线路：
```
.service__nav a { 
    white-space: nowrap; 
} 
```

你不必格式化HTML，只是<a>元素之间加空格：

<nav class="service__nav"> 
<a href="/">LinkTest One</a> <a href="/">LinkTest Two</a> <a href="/">LinkTest Three</a> <a href="/">LinkTest Four</a> 
</nav>

查看更新JSFiddle

来源

2016-07-19 17:11:02

明白了。有没有一种方法可以防止在各个链接中发生缠绕？例如，如果“LinkTest Four”碰到div的边缘，我想将整个字符串包装到下一行，而不是介于“LinkTest”和“Four”之间 – noclist

这就是答案中附带的[JSFiddle]（ https://jsfiddle.net/ska9qc0L/1/）。请注意''元素不包裹在里面，因为它们有'nowrap'。空间允许浏览器在它们之间进行换行，那就是发生了什么。看看第一行，例如：它包装_after_“LinkTest Three”。现在，在这个例子中删除'no-wrap'，你会看到它封装_inside_“LinkTest Four”。希望它有助于:) –

太好了，谢谢你的帮助 – noclist

影响显示的标记格式

回答

相关问题