删除链接和文本之间的空格和下划线

Question

我已经删除了我要删除链接和即将发布的文本之间的空格，但我无法确定如何执行此操作。我尝试过使用padding和margin，但没有任何作用。

HTML：

A <a href="#" style="letter-spacing: 1em;">link</a>. Some text.

输出：

以下是一个示例：http://codepen.io/anon/pen/gPQVXx

Answer 1

您可以尝试删除单词最后一个字母的字母间距。

A <a href="#" style="letter-spacing: 1em;">lin<span style="letter-spacing: 0;">k</span></a>. Some text.

这不是一个简洁的解决方案，但如果它是一次性的，它将完成工作。如果不是链接的下划线，那么等于字母间距的负右边距也可以完成。

Answer 2

此行为明显违反了spec。

  

给定的letter-spacing值仅影响间距   字符之间完全包含在元素中   它被指定：

     

＆＃13;

＆＃13;

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }

＆＃13;

<p>a<span>bb</span>c</p>

＆＃13;

＆＃13;

＆＃13;

     

     

这也意味着将letter-spacing应用于元素   只包含一个字符对渲染没有影响   结果：

     

＆＃13;

＆＃13;

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }

＆＃13;

<p>a<span>b</span>c</p>

＆＃13;

＆＃13;

＆＃13;

     

     

内联框仅包含字符间的字母间距   完全包含在该元素中：

     

＆＃13;

＆＃13;

p    { letter-spacing: 1em; }

＆＃13;

<p>a<span>bb</span>c</p>

＆＃13;

＆＃13;

＆＃13;

     

     

在右侧或尾部包含字母间距不正确   元素的边缘：

     

您只需要等到浏览器修复此问题。我建议不要使用像负边距这样的黑客来修复它，因为当浏览器实现标准行为时它会适得其反。

Answer 3

A <a href="#" style="letter-spacing: 1em;">lin</a><a href="#">k</a>. Some text

这很丑陋，但它可以解决问题。 JSFiddle

Answer 4

虽然此答案已被接受，但我不建议使用它。它在某些浏览器中断开，并且不会与屏幕阅读器兼容。除此之外，只是翻转字母也是不好的做法。我已经创建了这个答案来展示一些可能性，而不是一个好的解决方案

话虽如此。 Here it is

它需要一些额外的努力，但它可以在不使用负边距或额外的html的情况下工作。

你基本上必须交换所有的字母，你很高兴去！

这是因为使用了两件事。 letter-direction和:first-letter。

a{
  display: inline-block;
  letter-spacing: 1em;
  direction: rtl;
  unicode-bidi: bidi-override;
}

a:first-letter{
  letter-spacing: 0;
}

使用:last-letter选择器，这会更容易：）

希望这有帮助

Answer 5

试试这个

    A <a href="#" ><span style="letter-spacing: 1em;">lin</span>k</a>. Some text.

Answer 6

你可以尝试这个：

A <a href="#" style="letter-spacing: 1em;">lin<span>k</span></a>. Some text.

<强> CSS

span{
  letter-spacing: 0;
}

HERE MY DEMO