时间戳

首页 > 解决方案 > 如何使用 css 定位和隐藏标题

html - 如何使用 css 定位和隐藏标题

问题描述

我正在尝试定位一个标题，它也是a title. 我想隐藏的词contact来自以下 html。似乎没有其他方法，因为即使 ID 也链接到主菜单，所以通过 ID 隐藏它会隐藏整个菜单。

<div class="collapse navbar-collapse navbar-ex1-collapse">

  <ul id="menu" class="menu">
    <li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
      <a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
      <ul role="menu" class="dropdown-menu"></ul>
    </li>
  </ul>
  
</div>

也许我解释得不好。如果您在这里查看左上角的移动设备，通过切换汉堡图标来下拉下拉菜单，您会看到单词act,末尾的三个字母contact如何摆脱它？在桌面上，整个单词出现在徽标下方。这是一个带有子项的项目，我尝试使用更高层的选择器并将它们应用于 ID，例如ul li，但这不起作用。隐藏 ID 将隐藏父项和子项，当我需要将其与其子项分开并单独隐藏时。

标签： htmlcss

解决方案

有一些巧妙的方法可以使用 CSS 隐藏文本，尽管这不是最理想的方法。这种方法使用文本缩进的巧妙组合来实现最终结果。您可以使用属性选择器来定位<a>title 属性为“Contact”的任何标签，如下所示：

a[title='Contact'] {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

正如这篇文章中所引用的，它也可以提供更多的想法。尤其：

a[title='Contact'] { color: transparent; }

推荐阅读