固定宽度div内的包装链接

我有一个固定宽度的div，包含一堆链接，每个链接都有文字，文字之间没有空格。固定宽度div内的包装链接

我试图实现的是当链接命中div的边缘时，整个链接沿着一条线移动。

我刚刚在JSFiddle中玩过，最初我有一个长的未格式化（没有标签在新行等）的一块html，并观察最后一个链接，而不是移动到一个新行。

然后我决定重新格式化，所以把新的标签放在行上，这样做后，最终的标签现在移动到一个新的行，当它受到div的宽度限制。

我实际上是从一个脚本动态生成html，目前它只是为我生成一个单一的连接字符串然后渲染。下面是我使用的HTML和工作捣鼓出这两种方法的结果：

<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&nbsp;View</a><a action="addplacemarker" href="#" style="font-size:11px;padding-right:2px;">Add&nbsp;Placemarker</a><a action="route" href="#" style="font-size:11px;padding-right:2px;">ETA&nbsp;To</a><a action="reportproblem" href="#" style="font-size:11px;padding-right:2px;">Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#" style="font-size:11px;">Send&nbsp;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&nbsp;View</a> 
<a action="addplacemarker" href="#" style="font-size:11px; padding-right:2px;">Add&nbsp;Placemarker</a> 
<a action="route" href="#" style="font-size:11px; padding-right:2px;">ETA&nbsp;To</a> 
<a action="reportproblem" href="#" style="font-size:11px; padding-right:2px;">Incorrect&nbsp;Location&nbsp;Details</a> 
<a action="sendmessage" href="#" style="font-size:11px; padding-right:2px;">Send&nbsp;Message</a> 
</div>

为什么会出现这里活动的差异？感谢

来源

2015-04-17 mindparse

存在“填充右：2px的”失踪 –

感谢您指出了这一点，但它并不能帮助我在这种情况下 – mindparse

退出空间之前， “Street＆nbsp”in first div –

我相信这种情况发生的原因是因为内联元素之间没有空白，导致它作为一个长字符串有效地呈现。尝试将您的锚标记设置为内联块。

a{ 
    display: inline-block; 
}

Here is the fiddle

来源

2015-04-17 13:18:47 tribe84

谢谢！ – mindparse

似乎与到New line between anchors in HTML source creates empty space in browser

但是修复它，因为我相信什么OP想要的东西，是每个锚后添加空格，如增加& NBSP;如果可能的话。

来源

2015-04-17 13:18:16 Morvael

换行符在你的代码（第二个例子）产生的空白，因此它呈现你想要的方式。第一个例子将在一行中，但第二个链接中有一个前导空格。

通过添加

div a { display: inline-block; }

你的第一个例子，你可以得到你想要的效果。

来源

2015-04-17 13:20:14 Paul

谢谢，别人打你，但你的变化也是有用的。 – mindparse

虽然使用inline-block是解决这个问题的一种方式，这个问题在你原来的职位源是在下面的代码片段：

<a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street&nbsp;View</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&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div> 
 
<hr> 
 
<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" >Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div> 
 
<hr> 
 
<div> 
 
<a href="#" action="zoom" >Zoom</a> 
 
<a action="streetview" href="#" >Street&nbsp;View</a> 
 
<a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a> 
 
<a action="route" href="#" >ETA&nbsp;To</a> 
 
<a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a> 
 
<a action="sendmessage" href="#" >Send&nbsp;Message</a> 
 
</div>

从第一个div最后锚

来源

2015-04-17 13:28:19

固定宽度div内的包装链接

回答

相关问题