通过 CSS 隐藏文本？答案

【问题标题】：Hide text via CSS?通过 CSS 隐藏文本？
【发布时间】：2015-08-04 07:18:11
【问题描述】：

是否可以使用 CSS 将字符串 Last Name 隐藏在 th 中？

重要的是表格的背景颜色、字体大小等不会受到影响。

<html lang="en">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <br>
  <table>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

Hide text using css 的可能重复项
为什么不给标签一个 id 然后使用这个 ID 通过 css 更改属性？即：可见性：隐藏；

标签： html css

【解决方案1】：

<style> 
 .hideMe {display:none;} 
</style>

在“th”和“td”上添加这个类

<th class="hideMe">Last Name</th>
<td class="hideMe">Otto</td>

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

您可以通过给元素一个 ID 或一个类并添加类似的样式来实现这一点

display: none;

在你的 css 文件中为这个 ID/这个类。

【讨论】：

这将导致有问题的元素消失，在给定当前 DOM 的情况下在布局中打孔。这也会使列变窄，因此他需要将文本放入 th 内的另一个子项中，这将允许 th 的 bg 颜色显示出来。

【解决方案3】：

你可以试试这个：

.hidden-text {
  text-indent: -9999px;
}

【讨论】：

OP 绝对可以尝试，但您确定这会有所帮助吗？当然，我们不是来填鸭式的，但没有解释的回答会引发很多问题。
是的，我至少应该提到该类需要添加到th（尽管这对我来说似乎很明显）。
@Simone 最好在你的回答中告诉 OP，因为当他们遇到类似问题时，这也会帮助其他人

【解决方案4】：

您可以使用 CSS pseudo selector 隐藏。

th:nth-child(3) { 
  display: none;
}

【讨论】：

【解决方案5】：

使用第 n 个元素你可以做到。

th:nth-child(3) {
    display:none;
}

<html lang="en">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>




<body>
  <br>
  <table>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </table>
</body>

</html>

参考this link.

【讨论】：

【解决方案6】：

您可以使文本与背景颜色相同，尽管这仍然意味着文本存在并且可以选择，但它会保留布局的所有其他方面。或者您可以将文本放在一个跨度中并隐藏该可见性。

【讨论】：

如果他以第一种方式进行，他可以设置指针事件：无；文本颜色相同时...

【解决方案7】：

您也可以使用可见性属性。

th:nth-child(3) {
    visibility:hidden;
}

【讨论】：

【解决方案8】：

如果不想影响表格，您可以更改文本的颜色（使用 rgba 属性）。

.lastName{
   color:rgba(0,0,0,0); /*Set opacity to 0*/
 }

如果你使用 display 属性，你会隐藏所有的<th></th>（而不仅仅是文本）。

祝你好运，

【讨论】：