链接箭头下降到新行 [英] Link arrows dropping to new line

问题描述

我有一个侧边栏有一个链接列表，每个链接右边有一个箭头图标（使用：后选择器在锚样式中设置）。在许多链接上，箭头下降到它自己的线。我想确保文本可以根据需要断开到一个新行，但是防止箭头被孤立到一行本身。

I have a sidebar with a list of links and each link has an arrow icon to the right of it (set in the anchor styles using the :after selector). On many of the links, the arrow is dropping down to its own line. I want to make sure the text can break to a new line as needed, but prevent the arrow from being orphaned onto a line by itself.

我以为我解决了问题通过使用white-space：nowrapon：after伪元素，因为在Firefox中工作。不幸的是，我发现它不工作在IE8，Chrome& Safari。

I thought I had solved the problem by using "white-space: nowrap" on the :after pseudo element because that worked in Firefox. Unfortunately, I discovered it isn't working in IE8, Chrome & Safari.

有一种方法可以防止链接图标断开到自己的行，同时仍然允许链接中的文本根据需要换行，在Firefox，IE8 ，Chrome和Safari？

Is there a way to prevent the link icon from breaking to its own line, while still allowing the text in the link to wrap as needed, in Firefox, IE8, Chrome and Safari?

基本HTML结构：

<div id="sidebar">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 12</a></li>
  </ul>
</div>

样式规则（以sass编写）：

The style rules (written in sass):

div#sidebar
  width: 170px

  a:after
    content: url('images/icon_double-arrow.png')
    margin: 0 0 0 6px
    white-space: nowrap

推荐答案

我相信我解决了这个问题。我改变了样式，使箭头图像设置为锚背景，并使用填充，而不是将箭头图像设置为：后内容定位到右侧。适用于所有上述浏览器：a border：0 background：url（'images / icon_arrow.png'）no-repeat right center padding-right：15px

I believe I resolved the issue. I changed the styles so that the arrow image is set as the anchor background and positioned it to the right using padding instead of setting the arrow image as :after content. Works in all mentioned browsers: a border: 0 background: url('images/icon_arrow.png') no-repeat right center padding-right: 15px

这篇关于链接箭头下降到新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！