只隐藏HTML段落中的文本

Question

我想隐藏段落中的文本，但段落中还有一张图片和一些其他文本。当我使用 css 的 display none 属性时，所有段落都被隐藏了…但我只想隐藏文本而不是图片。 下面是代码。

<p>
  <a href="/_blog/News_and_Inspiration/post/Cooking_up_a_storm/"><img alt="" style="border: 0px solid; width: 100px; height: 150px; float: left; margin-right: 10px; margin-bottom: 10px;" src="/images/blog/Shaun-Clouston.jpg" /></a>
    The executive chef of Wellington&rsquo;s award winning  Restaurant, Shaun Clouston is just one of the award winning New Zealand Beef and Lamb Ambassador chefs we have cooking up a storm at our Rural Women New Zealand Beef + Lamb Cooking Demonstrations over the coming months.&nbsp;
</p>

<p>
  <img src="/images/blog/Southland Life Education Trust Car 2.jpg" alt="">
  Two years ago the Southland Life Education Community Trust approached our four Southland Provincials, asking for assistance to replace their educator’s car, as the current one needed major repairs.
</p>

- asif

---

代码比这个图片预览更好。 - SVS

@svs 你没有OCR吗？ - Royi Namir

如果您能将文本放在<span>标签内，它就可以正常工作 - 示例。请将代码作为文本而不是图像。 - Shadow The Spring Wizard

以下给出的答案并不是解决方案，只是一些hack。在我看来，这不能满足任何布局的需求。 - SVS

Answer 1

尝试:

p {
    font-size: 0;
}

同时为您想要显示的任何子元素指定字体大小。

- David Thomas

---

聪明。只要文本不太长，你可能可以将color设置为white，或者如果你很幸运的话，在IE8-中可以设置为transparent，这样文本仍然会显示。 - Sandy Gifford

@asif：你应该接受他的答案来表示你的问题已经解决。 - Rutix

是的，我同意@PeeHaa的观点，IE 8及以下版本似乎不太喜欢这个。但是，这很有创意，对我的情况非常有效！谢谢！ - Rich Finelli

Answer 2

根据您的布局和是否需要使用display: none;来隐藏内容，您可以像下面的示例一样使用visibility: hidden;：

p {
   visibility: hidden;
}

img {
    visibility: visible;
}

请点击这里查看示例。

- Sirko

---

这实际上是一个非常好的答案，但需要强调“取决于您布局的其余部分”，因为visibility: hidden元素仍然可能占据页面上的空间。虽然我想这样做更有意义，但display: none必须被继承。 - Sandy Gifford

@asif 所以你应该接受他的答案，以向其他人展示你的问题已得到解决。 - Sirko

Answer 3

另一个选项：

    p{
        text-indent: -1000px;
    }
    img{
        position: absolute;
        left:10px; /*obviously position how you like*/
    }

- Rhyso

---

如果文本非常长，letter-spacing: -negative value 也可以帮助。 - biziclop

Answer 4

有许多选项可用，

1. 文本和背景颜色相同
2. 字体大小为0px
3. 显示为无
4. 可见性：隐藏 还有很多其他选项...

如果有帮助，很好。 谢谢。

- loyola

Answer 5

你可以把文本放进标签，并将其设为display:none;。希望这能帮到你 :)

  p span {
display:none;
}

<p>
  <a href="/_blog/News_and_Inspiration/post/Cooking_up_a_storm/"><img alt="" style="border: 0px solid; width: 100px; height: 150px; float: left; margin-right: 10px; margin-bottom: 10px;" src="/images/blog/Shaun-Clouston.jpg" /></a>
  <span>The executive chef of Wellington&rsquo;s award winning  Restaurant, Shaun Clouston is just one of the award winning New Zealand Beef and Lamb Ambassador chefs we have cooking up a storm at our Rural Women New Zealand Beef + Lamb Cooking Demonstrations over the coming months.&nbsp;</span>
</p>

- Kate Artyukhova

Answer 6

这也可以！只需隐藏innerHTML文本并保留其他组件。

  <div id="container" style={{color:'transparent'}} dangerouslySetInnerHTML={{__html: html}}></div>

- Shreesh babu