如何隐藏不在 HTML 标记中的文本

How to hide text which is not inside HTML tag?

本文关键字：HTML 文本 何隐藏 隐藏      更新时间：2023-09-26
<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

在上面的代码中，我想隐藏"US"字。我在美国之后隐藏了那个图像，但找不到隐藏这个"美国"字的方法。隐藏它的代码是什么？

像这样的东西？

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

工作小提琴

或

如果你想使用JavaScript(我不明白为什么(，这是解决方案：

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is text node
    pad.removeChild(el);     // remove the text node
  }
});
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

使用 css：

.padd10_m { font-size: 0; }
.padd10_m * { font-size: 1rem;}

尝试用font-size隐藏 

.padd10_m{font-size:0;}
.padd10_m > a{font-size:16px;}
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

CSS

   .padd10_m {
    font-size:0px;
    }
    .padd10_m a{
    font-size:14px;
    }

.HTML

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

添加 ：after，您可以在 admin 和标志之间添加一个空格。

.padd10_m{
  font-size: 0px;
}
.padd10_m a{
  font-size: 16px;
}
.padd10_m a:after{
  content: ' ';
}

<script type="text/javascript">
    document.body.innerHTML = document.body.innerHTML.replace(/US <img/g, '<img');
</script>

繁荣

您可以将图像(美国国旗(移到文本上：

.padd10_m img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
}

此外，您可以将字体颜色设置为与背景颜色相同。

img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
  }
<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

更新：我没有意识到图像也应该被隐藏。这是另一个解决方案：

.padd10_m {
  width: 40px;
  overflow: hidden;
  white-space: nowrap;
}
<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

相关文章：