1

I have the following:

<h4 class="modal-title">Algebra I, Algebra II (2 free spaces)</h4>

I wish to hide "(2 free spaces)" only but still display the rest. How may I do so utilizing CSS only?

Final result should ONLY show "Algebra I, Algebra II".

captainabhious
  • 11
  • 3

3 Answers3

0

You can do so.

<h4 class="modal-title">Algebra I, Algebra II <span style="opacity:0;">(2 free spaces)</span></h4>

This code will hide the "(2 free spaces)".

midugh
  • 608
  • 5
  • 21
0

You can do it by making the whole text invisible and then rewrite it using :before or :after

This technique replace the whole text, not just a part of it. But yes, i'ts possible to replace text using CSS. Check:

.modal-title {
 font-size:0px;
}
.modal-title:before {
 font-size:12px;
 display:inline-block;
 content: "Algebra I, Algebra II"
}
danielarend
  • 1,379
  • 13
  • 26
  • So the content itself is dynamic. As the class suggests, it is a modal pop up based on which lesson you click. The "x free spaces" can be either 2 or 5. How can I create two different scenarios to catch if its 2 or 5 and only eliminate that. The class names can only change (for example: could be Geometry, Pre-Calc instead of Algebra I, Algebra II) but that has much more variability than just 2 or 5 free spaces. – captainabhious Dec 11 '18 at 23:50
  • Only using CSS this scenario seems impossible. Can be done by using javascript or changing html structure. – danielarend Dec 11 '18 at 23:52
0

You can add a span around (2 free spaces) with a class so that you can refrence it in your css:

<h4 class="modal-title">Algebra I, Algebra II <span class="hide">(2 free spaces)</span></h4>

Then, in your css you can hide it by targetting the span's class using display: none:

.hide {
  display: none
}

See working example below:

.hide {
  display: none;
}
<h4 class="modal-title">Algebra I, Algebra II <span class="hide">(2 free spaces)</span></h4>

If you cannot add a span to your HTML or don't know the size the size of your title, you can use the following javascript:

let modal_title = document.querySelectorAll('.modal-title'); // get the modal title elements

modal_title.forEach(elem => { // loop over each element, where elem represents a given modal title
  let txt_title = elem.textContent; // get the text from that given modal title
  elem.innerHTML = txt_title.replace(/(\(\d+ free spaces\))/, "<span class='hide'>$1</span>"); // add the "hide" span around the title text using regex
});
.hide {
  display: none;
}
<h4 class="modal-title">Algebra I, Algebra II (2 free spaces)</h4>

<h4 class="modal-title">Alg I, Alg II (10 free spaces)</h4>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64