如何使用 css 或 Javascript 在特定单词后换行

Question

I have a String, which I am displaying in one span.

<div>
 <span>The name of this person is john He is a cricket player </span>
</div>

here it is taking the width as of the text is. Now, I don't want to give any specific width to this element. So I tried

.parent{
  display: inline-block // so that the div should take only that width as of the text
}

.childspan {
  //word-wrap: break-all;
}

So, How do I break the span in two lines using CSS after specific word is ?

Is there any way to do this? without giving the fixed width?

Answer 1

The easiest thing with js would be

const child = document.querySelector('.parent .child');
child.innerHTML = child.innerHTML.replace("is", "is<br/>");

and it can be used in any element to break after word, also if you need to break after every is, then use it with RegExp

child.innerHTML = child.innerHTML.replace(/is/g, "is<br/>");

Answer 2

You could use 2 span elements and add a <br> in between:

 <div> <span>The name of this person is john He is</span> <br> <span>a cricket player </span> </div>

Or alternatively use the ::after pseudo class:

 <div> <span id="line1">The name of this person is john He is</span> <span>a cricket player </span> </div> <style> #line1::after{ content: "\a"; white-space: pre; } </style>

Answer 3

U can use <br> tag, where u want to break a line.