Ways to conceal text that is not wrapped in an HTML tag

Question

Ways to conceal text that is not wrapped in an HTML tag

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

I'm currently working on modifying the code above, specifically aiming to hide the "US" word. While I have successfully hidden the image that appears after "US," I am struggling to find a way to hide the actual text "US." If anyone knows the appropriate code to achieve this, please let me know!

javascript html css wordpress

Answer 1

Answer №1

Is this what you're looking for?

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

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

View the working fiddle here

Alternatively

If you prefer using JavaScript (although it may not be necessary), consider the following solution:

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is a 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>

Answer 2

Is this what you're looking for?

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

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

View the working fiddle here

Alternatively

If you prefer using JavaScript (although it may not be necessary), consider the following solution:

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is a 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>

Answer 3

Answer №2

Here is a CSS solution:

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

Answer 4

Here is a CSS solution:

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

Answer 5

Answer №3

Experimenting with hiding elements using font-size

.content_hidden{font-size:0;}
.content_hidden > p{font-size:16px;}

<div class="content_hidden">
  <p>This text will be hidden</p>
  <img src="example.jpg">
</div>

Answer 6

Experimenting with hiding elements using font-size

.content_hidden{font-size:0;}
.content_hidden > p{font-size:16px;}

<div class="content_hidden">
  <p>This text will be hidden</p>
  <img src="example.jpg">
</div>

Answer 7

Answer №4

Styling with CSS

   .padding-10 {
    font-size:0px;
    }

    .padding-10 a{
    font-size:14px;
    }

Creating HTML Content

<div class="padding-10">
<a href="http://www.website.com/page/" class="link" target="_blank">Click Here</a> 
US <img src="images/us-flag.png">                
</div>

Answer 8

Styling with CSS

   .padding-10 {
    font-size:0px;
    }

    .padding-10 a{
    font-size:14px;
    }

Creating HTML Content

<div class="padding-10">
<a href="http://www.website.com/page/" class="link" target="_blank">Click Here</a> 
US <img src="images/us-flag.png">                
</div>

Answer 9

Answer №5

By using :after, it is possible to insert a space between the word "admin" and the flag.

.addSpace{
  font-size: 0px;
}

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

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

Answer 10

By using :after, it is possible to insert a space between the word "admin" and the flag.

.addSpace{
  font-size: 0px;
}

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

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

Answer 11

Answer №6

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

Wow

Answer 12

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

Wow

Answer 13

Answer №7

If you want to position the image (US-Flag) over the text, you can use the following CSS:

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

Another option is to make the font color the same 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: If you also need to hide the image, you can try this CSS 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>

Answer 14

If you want to position the image (US-Flag) over the text, you can use the following CSS:

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

Another option is to make the font color the same 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: If you also need to hide the image, you can try this CSS 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>

Ways to conceal text that is not wrapped in an HTML tag

Answer №1

Alternatively

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping

How can I center a <a> vertically within a list that has varying heights?

Solving relative paths in NodeJS/Express

Get the PDF in a mobile app using HTML5 and Javascript

Incorporate a corner box feature to bring attention to the typed.js functionality

issue encountered when implementing slick.js in angular 6

The browser window's location is redirected to an empty page

Identify and emphasize fields that contain identical, non-empty values

Are there more efficient methods than having to include require('mongoose') in each models file?

What is the best way to create a function that can disable console.log and be imported into other React files for easy access?

Storing a dataURL in MongoDB for easy access through a local URL using JavaScript

Remain concealed once the lights dim

Middleware in Expressjs ensures that variables are constantly updated

The animation of the splash screen in Angular is quite jarring and lacks fluidity

Is it necessary to confirm the validity of url.format(urlObject)?

Why is the click event not working in IE8 for JavaScript / jQuery?

There is currently no loader set up for ".html" files within the Vitejs configuration, specifically for the index.html file

Utilizing JSON data retrieved from an API to populate a dropdown menu in HTML

The alignment of navbar elements appears to be off in Jquery mobile

A WordPress website featuring the impressive capabilities of the Three.js JavaScript 3D library