Css line break after full stop

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.

Hashem Qolami

94.7k26 gold badges146 silver badges157 bronze badges

asked Oct 23, 2014 at 7:58

4

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.

answered Oct 23, 2014 at 8:02

Jørgen RJørgen R

10.2k7 gold badges41 silver badges58 bronze badges

0

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

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.

Or add html breaks with the
element

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.

answered Oct 23, 2014 at 10:22

Gabriele PetrioliGabriele Petrioli

185k34 gold badges254 silver badges306 bronze badges

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.

answered Sep 12, 2016 at 21:36

FranCarstensFranCarstens

1,0817 silver badges12 bronze badges

This is a old question but people here says it's impossible in html/css etc and no one has contributed with the most simple answer.

Yes, it is possible. You first need to specify that there should be a new line in the string by using "\n". Then as Jørgen R answered: "HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property."

So to answer the question. Change the string to the following:

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

and add to your css:

.div{
white-space: pre-line;
}

answered Jan 14 at 9:27

Not doable in CSS. There is no selector that allows you to select a portion of the text. You'll have to add the line breaks "manually" in javascript.

answered Oct 23, 2014 at 8:11

LL1138LL1138

1263 bronze badges

How do I make a line break in CSS?

How do you prevent a line break in CSS?

Do line breaks matter in CSS?

How do I make a div break line?