CODEWITHSUNDEEP
cssstyles
Ashok
Ashok

Reputation: 59

How to make second line bold using CSS

I have a div which has some contents. I tried this CSS to make content in next line, but how can make second line bold ?

.description {
  white-space: pre-line !important;
}
<div class="description">
  Head of Department 
  Department: XYZ ABCD 
  [email protected]
</div>

Upvotes: 0

Views: 852

Answers (1)

mahooresorkh
mahooresorkh

Reputation: 1444

You can not do that with pure CSS. But this task can be done by some Js works.

Remove this style:

.description {
    white-space: pre-line !important;
}

and next add this CSS style:

.singleLine{
    white-space: pre-line !important;
    display: block;
}

and then you can write this Js code :

var element =  document.getElementsByClassName("description")[0];
var text = element.innerHTML;
var multipleLinesText = text.split(/\r?\n/);
const theBoldLinesIndex = [1];
var spans = "";
multipleLinesText.map((value,index)=>{
    if(theBoldLinesIndex.some(i=>i==index)){
        spans += `<span class="singleLine"><b>${value}</b></span>`;
    }
    else{
        spans += `<span class="singleLine">${value}</span>`;
    }
})
        
element.innerHTML = spans;

Consider these two things:

First, make this Js part run after the Html elements have been rendered.

Second, in theBoldLinesIndex insert the lines index you want to be bold, which in your case, is second line (index = 1).

Upvotes: 1

Related Questions