CODEWITHSUNDEEP
htmlcss
mani
mani

Reputation: 1044

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

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.

Upvotes: 10

Views: 23484

Answers (5)

Jonatan Glader
Jonatan Glader

Reputation: 11

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;
}

Upvotes: 1

FranCarstens
FranCarstens

Reputation: 1403

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.

Upvotes: 3

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196207

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.

Upvotes: 1

LL1138
LL1138

Reputation: 126

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.

Upvotes: 0

J&#248;rgen R
J&#248;rgen R

Reputation: 10806

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.

Upvotes: 13

Related Questions