Hide Text in HTML Which Does Not Have Any HTML Tags

Hide text in html which does not have any html tags

I would consider a CSS hack with font-size:

.entry {  font-size:0;}.entry * {  font-size:initial;}

<div class="entry"><p class="page-header" style="text-align: center;"><strong>Enter</strong></p><p>  somethin here</p>Enter (this will be hidden !!)<div class="subhead">another text here</div></div>

How to hide content without element tag in html?

if you can't changes in html structure then You can try using font-size

jQuery(document).ready(function(){
  jQuery(".login_content").children().hide();
  jQuery('.welcome').show();
});

.login_content {
  font-size: 0;
}
.login_content > b {
    display: none;
}
.login_content > .welcome {
    display: flex;
    font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login_content">
  <div class="welcome">Welcome <b> name</b></div>
     <b><a href="/">Agent Portal</a></b> | 
     <b><a href="/">Edit profile</a></b> - 
     <b><a href="/logout">Sign out</a></b>
</div>

How can I hide text content but not child elements?

A bit hacky but works

.a {
  font-size: 0px;
}
.a span {
  font-size: 1rem;
}

don't use visibility property, it makes the text invisible but does not remove it.

How to hide content that is not wrapped by tag using only CSS?

Based on Paulie_D's answer, I came with a solution by using font-size:

a {
    font-size: 0;
}

a span {
    font-size: 16px;
}

DEMO

Based on the comments on this answer, I think this might be the solution. It isn't perfect, but will do. We use my answer with the font-size: 0. Like Paulie_D commented this won't work crossbrowser, some browser will show it in a font-size of 4px. For those browser we add Paulie_D's solution too:

a {
    font-size: 0;
    visibility:hidden;
}

a span {
    font-size: 16px;
    visibility:visible;
}

To see the difference between the two: check here.

What's the proper way to hide any HTML tag?

Both display:none and visibility:hidden are universally supported by CSS-enabled browsers, so only the general CSS caveats apply. The have different effect: display:none causes the document to be rendered as if the element were not there at all, whereas visibility:hidden means that the element will be duly processed when formatting the document, normally occupying some space, but removed from the view as if it were turned completely transparent.

Which one you use depends on your goal of hiding an element. For example, if you dynamically (with a client-side script) switch off or on some content, then visibility:hidden can be better as it does not cause a redraw of other content.

Using both is normally pointless, as display:none makes visibility:hidden irrelevant (though in the cascade, it might happen that your settings for these properties may be overridden by other style sheets, and then display:none may lose effect).

Hide Text in HTML Which Does Not Have Any HTML Tags