我有一个固定的宽度div，包含一堆链接，每个链接的文字都在单词之间有不间断的空格。
我想要实现的是，当一个链接到达div的边缘时，整个链接向下移动一行。
我刚刚在JSFiddle玩游戏，最初我有一个长的未格式化（没有标记在新行等）的html片段，并且正在观察最终链接没有移动到新行。
然后我决定重新格式化，所以在行上放置新标签，然后，当它被div的宽度限制时，最终标签现在移动到一个新行。
我实际上是从脚本动态生成html，目前它只为我生成一个连接字符串然后呈现。以下是我正在使用的HTML以及显示两种方法结果的工作小提琴：
http://jsfiddle.net/8gdez8ur/2/
<div style="width: 350px; overflow: hidden;"><a href="#" action="zoom" style="font-size:11px;padding-right:2px;">Zoom</a><a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street View</a><a action="addplacemarker" href="#" style="font-size:11px;padding-right:2px;">Add Placemarker</a><a action="route" href="#" style="font-size:11px;padding-right:2px;">ETA To</a><a action="reportproblem" href="#" style="font-size:11px;padding-right:2px;">Incorrect Location Details</a><a action="sendmessage" href="#" style="font-size:11px;">Send Message</a></div>
<hr>
<div style="width: 350px; overflow: hidden;">
<a href="#" action="zoom" style="font-size:11px; padding-right:2px;">Zoom</a>
<a action="streetview" href="#" style="font-size:11px; padding-right:2px;">Street View</a>
<a action="addplacemarker" href="#" style="font-size:11px; padding-right:2px;">Add Placemarker</a>
<a action="route" href="#" style="font-size:11px; padding-right:2px;">ETA To</a>
<a action="reportproblem" href="#" style="font-size:11px; padding-right:2px;">Incorrect Location Details</a>
<a action="sendmessage" href="#" style="font-size:11px; padding-right:2px;">Send Message</a>
</div>
为什么这里的行为存在差异？ 感谢
答案 0 :(得分：3)
我认为发生这种情况的原因是因为内联元素之间缺少空白，导致它有效地呈现为一个长字符串。尝试将锚标记设置为内嵌块。
a{
display: inline-block;
}
答案 1 :(得分：1)
似乎与New line between anchors in HTML source creates empty space in browser
有关然而，根据我认为OP想要的东西来修复它，就是在每个锚之后添加空格，例如添加＆amp; nbsp;如果可能的话。
答案 2 :(得分：1)
代码中的换行符（第二个示例）生成空格，因此它以您想要的方式呈现。第一个例子是一行，但第二个链接中有一个前导空格。
添加
div a { display: inline-block; }
到第一个例子，你可以得到你想要的效果。
答案 3 :(得分：1)
虽然使用inline-block是一种解决问题的方法，但原始帖子中问题的来源位于以下代码段中：
<a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street View</a>
如果你仔细观察，你会在＆＃34;＆gt;＆＃34;之间留出一个空格。和＆＃34; Street＆＃34;，这足以导致第一个a元素之后的换行符。
如果删除空格，那么该行确实会停留在一行并因overflow: hidden而被裁剪。
div {
width: 350px;
overflow: hidden;
border: 1px dotted blue;
}
div a {
font-size: 11px;
padding-right: 2px;
}<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" > Street View</a><a action="addplacemarker" href="#" >Add Placemarker</a><a action="route" href="#" >ETA To</a><a action="reportproblem" href="#" >Incorrect Location Details</a><a action="sendmessage" href="#">Send Message</a></div>
<hr>
<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" >Street View</a><a action="addplacemarker" href="#" >Add Placemarker</a><a action="route" href="#" >ETA To</a><a action="reportproblem" href="#" >Incorrect Location Details</a><a action="sendmessage" href="#">Send Message</a></div>
<hr>
<div>
<a href="#" action="zoom" >Zoom</a>
<a action="streetview" href="#" >Street View</a>
<a action="addplacemarker" href="#" >Add Placemarker</a>
<a action="route" href="#" >ETA To</a>
<a action="reportproblem" href="#" >Incorrect Location Details</a>
<a action="sendmessage" href="#" >Send Message</a>
</div>