CSS 如何在跨度后隐藏文本

Question

以下是我为 Joomla 开发的模板中的一些代码。下面的代码是生成的输出。

是否可以使用 css 在结束跨度后隐藏标签中的文本？例如，如何隐藏“打印”、“电子邮件”和“编辑”这些词？

<ul class="icons">
  <li class="print-icon">
    <a href="#" onclick="window.print();return false;"><span class="icon-print"></span>Print</a>
  </li>
  <li class="email-icon">
    <a href="#email"><span class="icon-envelope"></span>Email</a>
  </li>
  <li class="edit-icon">
    <a href="#edit"><span class="icon-edit"></span>Edit</a>
  </li>
</ul>

感谢您的帮助

Answer 1

由于您实际上无法直接 select 文本节点，因此一种解决方法是将父元素的 font-size 设置为 0。然后为那些需要的 span 元素重置 font-size。这样做时，只有 span 元素应该出现，相邻的文本节点应该有效隐藏。

Example Here

.icons li a {
    font-size: 0;
}
.icons li a span {
    font-size: 16px;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="icons">
  <li class="print-icon">
    <a href="#" onclick="window.print();return false;"><span class="fa fa-print"></span>Print</a>
  </li>
  <li class="email-icon">
    <a href="#email"><span class="fa fa-envelope"></span>Email</a>
  </li>
  <li class="edit-icon">
    <a href="#edit"><span class="fa fa-edit"></span>Edit</a>
  </li>
</ul>

Answer 2

您可以只留下 html 中的字词。

<a href="#email"><span class="icon-envelope"></span>Email</a>

变成

<a href="#email"><span class="icon-envelope"></span></a>

Answer 3

您可以尝试将锚标记设置为内联块并为其指定图标的宽度，然后将溢出设置为隐藏：

.edit-icon a, .email-icon a, .print-icon a { display: inline-block; width: 16px; overflow: hidden; }

这里有点jsfiddle

CSS 如何在跨度后隐藏文本

CSS How to hide text after a span

html

css

hidden