固定寬度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內的包裝鏈接

回答

相關問題