Geek Answers Handbook

How to hide text that is not inside the HTML tag?

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

In the above code, I want to hide the word "USA". I hide this image after the USA, but I cannot find a way to hide this "American" word. what could be the code to hide it?

+5
source share
7 answers

Something like that?

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

Working violin

or

If you want to go with JavaScript (I don't understand why), here is the solution:

 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>
+3
source

Use css:

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

Try to hide 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>
+1
source

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>
+1
source

You can move the image (US-Flag) above the text:

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

In addition, you can set the font color in the same way as the background color.

 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>

Update: I did not understand that the image should also be hidden. Here's another solution:

 .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>
+1
source

Addendum: after that you can add a space between admin and the flag.

 .padd10_m{ font-size: 0px; } .padd10_m a{ font-size: 16px; } .padd10_m a:after{ content: ' '; }
+1
source 
 <script type="text/javascript"> document.body.innerHTML = document.body.innerHTML.replace(/US <img/g, '<img'); </script>

Arrow

+1
source

More articles:


All Articles