Question

<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”字样。我在美国之后隐藏了这张图片，但无法找到隐藏这个“美国”字样的方法。什么可能是隐藏它的代码？

Answer 1

这样的东西？

＆＃13;

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}

＆＃13;

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

＆＃13;

<强> Working fiddle

或

如果您想使用JavaScript（我不明白为什么），以下是解决方案：

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

Answer 2

使用css：

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

Answer 3

尝试隐藏~/.asoundrc

font-size

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

Answer 4

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>

Answer 5

您可以在文本上移动图像（US-Flag）：

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

Answer 6

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

.padd10_m{
  font-size: 0px;
}

.padd10_m a{
  font-size: 16px;
}

.padd10_m a:after{
  content: ' ';
}

Answer 7

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

动臂

如何隐藏不在HTML标签内的文本？

7 个答案:

或