Apply css to the substring in a tag-CodePudding

boldPartialText(text) {
    let textArr = text.split(' ');
    if (textArr.indexOf('make') !== -1 && textArr.indexOf("boldtext") !== -1) {
      textArr.splice(textArr.indexOf('make') - 1, 0, "<span class='make-it-bold'>");
      textArr.splice(textArr.indexOf("boldtext")   1, 0, "</span>");
    }
    return textArr.join(' ');
  }
  
 
  let result =  boldPartialText('some content comint from server so make it boldtext and enjoy.');

.make-it-bold {
   font-weight:bold;
};

<p> some content comint from server so make it boldtext and enjoy. </p>

I am having a

tag where I am binding the server content like below.

<p> "content coming from server <span class='make-it-bold'> make it bold </span> so how to do it" </p>

I am processing the text between  tag to add an  tag ( to the text which I want to make it bold). but it is not working.

.make-it-bold {
font-weight: bold;
}

CodePudding user response：

Instead of putting the class inside of the span element put it inside of the p element.

CodePudding user response：

Perhaps you are using a Google Font without loading the higher font-weight. Does the make-it-bold class work on the  tag that is not produced by the server?