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

由于您无法直接选择文本节点，因此一种解决方法是将父元素的font-size设置为0。然后为所需的font-size元素重置span。这样做时，只应出现span元素，并且相邻的文本节点应该被隐藏。

Example Here

＆＃13;

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

＆＃13;

<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>

＆＃13;

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如何在跨度后隐藏文本

3 个答案: