css style text with no tag inside class

user_14020698 0
Viewed 72

I am on a wordpress website of a client where I have to remove text they added by mistake under their logo . They use Outreach Pro wordpress theme and I cannot find in the theme where to remove the text in the header so I am going with custom css .

The format however with the text for the element is

<div class="title-area">
  <h1 class="site-title" itemprop="headline"><a href="...">TEXT I WANT </a></h1>TEXT TO REMOVE
</div>

where TEXT TO REMOVE is outside of the h1 tag , so how can I make its display none without including the h1 tag ? Thank you in advance

css html
4 Answers

Set the font-size to zero, and re-set if for the children:

.title-area { font-size: 0; }

.title-area h1 { font-size: 32px; }
<div class="title-area">
  <h1 class="site-title" itemprop="headline"><a href="...">TEXT I WANT </a></h1>TEXT TO REMOVE
</div>

user_37443040

Like an option, you can make your container flex with row layout and move text content you want to remove to the right; And text outside block will be cropped. Also you can move text to hide war away from view port by text-indent: 1000%;, see Code Snippet with comments:

.title-area {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap; /* make text in one line */
  text-indent: 1000%; /* move text to remove far away */
}

.title-area .site-title {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
  text-indent: 0; /* move site title to the beginning */
}
<div class="title-area">
  <h1 class="site-title" itemprop="headline"><a href="...">TEXT I WANT </a></h1>TEXT TO REMOVE
</div>

user_60858640

Rules get overridden in css

.title-area
{
    visibility:hidden;
}
.site-title
{
    visibility:visible;
};
<div class="title-area">
  <h1 class="site-title" itemprop="headline"><a href="...">TEXT I WANT </a></h1>TEXT TO REMOVE
</div>

user_189903210

You can do it by using js or css. I will show only the js solution for it.

JS Version

const el = document.querySelector(".title-area > *");
document.querySelector(".title-area").innerHTML = el.outerHTML;
<div class="title-area">
  <h1 class="site-title" itemprop="headline"><a href="...">TEXT I WANT </a></h1>
  TEXT TO REMOVE 
</div>

user_148071110
Related