锚标签中有一些标签，文本缩进不起作用答案

【问题标题】：have some tag inside anchor tag and text-indent not working锚标签中有一些标签，文本缩进不起作用
【发布时间】：2019-07-29 16:03:51
【问题描述】：

我在标签内创建了标签并应用了文本缩进：-9999px;但它不起作用

为了符合 ADA，我们需要在锚标记内添加（新窗口）文本，但我不想显示文本，所以我使用 text-indent

HTML：

<a href="#" target="_blank" title="">Privacy Notice<em class="textIndent">(new window)</em></a>

CSS：

.textIndent { text-indent: -9999px; display: block; }

我想隐藏标签的文本而不使用 display:none 或 visibility

【问题讨论】：

嗯，您的解决方案应该可以工作。 -> jsfiddle.net/nLzuvpjr
它的工作，但额外的空间在锚标签下方
而且我也在使用这种导航栏，所以它会破坏和丢失一些对齐
哦。下次你应该更具体地说明你的问题。 I have created tag inside of tag and applied text indent:-9999px; but its not working从您的问题中我们了解到该元素不会被隐藏。 “额外空间”是因为 display:block style 。你应该研究看看它有什么作用。

标签： html css

【解决方案1】：

为了处理这种合规性，我不想让 DOM 变脏，一个干净的方法是添加一个带有所需警告消息的新元素并将 id 分配给该元素。否添加aria-describedby 属性，将其值设置为要宣布的消息的适当ID。如何完成的基本参考：

<a href="#" target="_blank" aria-describedby="new-win-52" class="" title="link">External Link</a>
<span hidden="" id="new-win-52">Opens in new window</span>

【讨论】：

感谢您提供的有用信息。我还有另一个疑问，如果我要从锚标签打开 pdf 文档，我必须如何编写标签（Web 可访问性说需要在链接上提及 pdf，如 Profile PDF) 但我不想在链接上写 PDF

【解决方案2】：

您可以使用font-size: 0; 代替text-indent: -9999px;

.textIndent { 
  font-size: 0;
  display: block;
}

&lt;a href="#" target="_blank" title=""&gt;Privacy Notice&lt;em class="textIndent"&gt;(new window)&lt;/em&gt;&lt;/a&gt;

【讨论】：

【解决方案3】：

我还建议使用这些 css，而不是 text-indent:indent:-9999px;

a {
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden;

}

【讨论】：