Here, I put text inside the div created as follows.

<div>There are Sentences that start like this, go on like this, and end like this</div>

result

If you look at this text, 'and' and 'end' have line breaks. Is it possible via css to make the line break appear as if it happened between 'and' and 'end' on any device without disabling the viewport? From any device, there should be a line break between 'and' and 'end', just like the text in the image. I want this text to look the same on mobile, desktop, and tablet.

If more text is added here, I'm thinking that the character position, punctuation mark position, and line break position will look the same on all devices.

CodePudding user response：

I don't think you can ever guarantee it without setting specific widths.

However, there is an element <wbr> which is used to denote a position where a line break should (preferably) occur.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr