CSS：如何刪除由鏈接中的換行符引起的額外空白空間？

Question

編輯2：我的時間很短，所以我會使用dippas建議使用實際圖像而不是背景。爲了防止有人提供更好的解決方案，我會繼續保持這個問題。感謝您的幫助！

原始的問題/問題：

我一直在谷歌搜索了一個小時的解決方案現在，無濟於事！

我正在格式化網站以響應和包含背景圖像的幾個長鏈接不正確。我試過float：left，display：block，display：inline-block and none of the work。最接近的一個問題是我將它設置爲display：inline，但我寧願將背景圖片放在旁邊，而不是放在最後一個字旁邊。

這是我第一次親自諮詢這個網站（我曾經多次使用過你的解決方案脫離ruts，所以謝謝！），所以我不能發佈圖片，但這裏有一個粗略的小提琴示例（編輯：這裏有一個新的小提琴，因爲其他人有一個定義的div寬度）：

http://jsfiddle.net/2e28fanq/22/

（我想擺脫的箭頭和「教育」）

CSS之間的額外空間：

a { 
    display: block; 
    float: left; 
    width: auto; 
    font-size: 1.5em; 
    padding-right: 40px; 
    background: url('Arrow-Right.png') 100% 50% no-repeat; 
} 

這裏是什麼，我需要做的粗說明：

Register for a FREE Educational > 
Webinar 

而且它在做什麼，而不是：

Register for a FREE Educational   > 
Webinar 

看到，因爲它的jsfiddle發生，我也懷疑它與我的其他代碼有什麼關係。由於保密/合同原因，我無法鏈接到相關網站，但我希望這裏有人能幫助我解決我所能提供的問題。謝謝！

Answer 1

你是這個意思嗎？

HTML

<div class="wrap"> 
    <a href="#">Register for a FREE Educational Webinar</a> 
</div> 

和CSS

.wrap { 
    display:inline; 
    width:auto; 
    padding: 15px; 
    border: 1px solid #000; 
} 
a { 
    width: auto; 
    font-size: 1.5em; 
    padding-right: 40px; 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
} 

See fiddle

Answer 2

一個簡單的解決方案是使用word-break: break-all：

.wrap { 
 
    width: 425px; 
 
    padding: 15px; 
 
    border: 1px solid #000; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: left; 
 
    width: auto; 
 
    font-size: 1.5em; 
 
    padding-right: 40px; 
 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
 
    word-break: break-all; 
 
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar</a> 
 
    <div style="clear:both;"></div> 
 
</div>

fiddle

這工作了很長的文字太：

.wrap { 
 
    width: 425px; 
 
    padding: 15px; 
 
    border: 1px solid #000; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: left; 
 
    width: auto; 
 
    font-size: 1.5em; 
 
    padding-right: 40px; 
 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
 
    word-break: break-all; 
 
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar asdasd asd asd asda as Register for a FREE Educational Webinar asdasd asd asd asda as </a> 
 
    <div style="clear:both;"></div> 
 
</div>

fiddle example with long text

Answer 3

多餘的空間不是空穴來風到來的錯誤。

似乎僅僅是因爲你設置背景位置是在100% 50%，這意味着100％的從左邊和從頂部50％。由於您的a的寬度爲425px（因爲父級的寬度爲425px，而子級爲display: block，它佔用了可用寬度的100％）並且箭頭朝右端延伸，所以右側文字和圖像的左側。

如果background-position-x的值不是100％，或者父母的寬度不是425px，則情況會有所不同，如下面的兩個示例所示。

• http://jsfiddle.net/2e28fanq/15/
• http://jsfiddle.net/2e28fanq/8/

Answer 4

更改填充：15像素;到主播。 添加保證金右：40像素;。

UPDATE：

背景夾不neccesary ...

.wrap { 
    width: 425px; 
    border: 1px solid #000; 
} 
a { 
    display: block; 
    float: left; 
    width: auto; 
    font-size: 1.5em; 
    padding: 15px; 
    margin-right: 40px; 
    padding-right: 40px; 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% center no-repeat; 
    background-clip: border-box; 
    word-wrap: break-word; 
} 

參見：http://jsfiddle.net/abrhmcc/75ybzLnz/3/

更改包裝的寬度以進行測試。

padding-right：40px;是要避免文字和箭頭重疊，你可以改變它來減少箭頭和文字之間的距離。