Question

我有以下HTML：

<span class="wrapper">
  <img src="..." />
  Some text!
</span>

当文字没有自己的标签时，如何隐藏文字而不隐藏图像？

Answer 1

位置相对，也许：

<span class="wrapper">
    <img src="http://www.placehold.it/100" />
  Some text!
</span>


.wrapper {
    position: relative;
    left: -9999px;
}

.wrapper img {
    position: relative;
    left: 9999px;
}

Demo

Answer 2

只有那么多的CSS可以做。

.wrapper {
  color: transparent;
}

我想如果你真的想要，你可以搞乱字体和家庭，但那只是凌乱。

Answer 3

尝试使用text-indent隐藏文字

 .wrapper {
      text-indent:-5000px;
    }

或span文字，并且具有唯一的class和display:none

HTML

<span class="wrapper">
  <img src="..." />
  <span>Some text!</span>
</span>

CSS

.wrapper span {
display:none;
}

Answer 4

从语义上讲，您的代码不正确。您正在内联元素（span）中插入内联块元素（内联表现为块）。您可以使用以下标记并轻松完成：

<p>
  <img src=""/>
  <span></span>
</p>

然后轻松隐藏跨度。：）

隐藏不在其自己的标记中的文本，但不隐藏同一父标记中的图像

4 个答案: