Question

我想在段落中隐藏文字，但是有一个图像和一些文字。当我使用css显示无时，所有段落都被隐藏...但我只想隐藏文本而不是图像。这是代码。

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

Answer 1

尝试：

p {
    font-size: 0;
}

并为要显示的任何后代元素指定字体大小。

Answer 2

根据您的布局的其余部分以及是否需要坚持display: none;隐藏内容，您可以visbility: hidden;使用，如下例所示：

p {
   visibility: hidden;
}

img {
    visibility: visible;
}

参见示例小提琴here。

Answer 3

另一种选择：

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

Answer 4

有很多选择，

文字和背景颜色相同
字体大小0px
display none
可见性：隐藏还有更多......

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

Answer 5

你可以将你的文字带入span并使其显示：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>

仅隐藏html段落中的文本

5 个答案: