how to break sentence after every dot (.) in CSS

Question

I have a text like this

Html is a Webbased language. For styling the webpage we have to use the css. For this we have to write the css and include those files.

My expected out put like this:

Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.

Answer 1

Either use pre and make the text have actual line breaks after the periods

<pre>Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.</pre>

Or add html breaks with the <br> element

Html is a Webbased language.<br/> For styling the webpage we have to use the css.<br/> For this we have to write the css and include those files.

Answer 2

The correct way to do this would be to use a list. Here's why:

1. HTML comes with it's own styling provided by H1-H6, p, strong, ul, ol etc. CSS merely adds visual styling.
2. You're obviously not breaking these lines for "the heck of it".
3. The output you desire is structured like a list.
4. The output would be read correctly regardless of the availability of visual styling (css) ex. screen readers etc.

Simple remove the list styling ex.

list-style-type: none;

The answer to your question is not "This can't be done", but you're approaching the problem from the wrong angle. This is not a CSS issue, but a problem with your markup.

Answer 3

HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property.

div {
    white-space: pre-line;
}

This will tell the browser to preserve line endings in divs.

EDIT

But if your text does not have newlines after the full stops, you either have to do this with JavaScript as Hashem Qolami pointed out, or serverside using whatever language you have there.

See String.prototype.replace() for how to do this client side.