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 ?
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>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/>");
U can use <br> tag, where u want to break a line.