Breaking and Wrapping Text With CSS11/20/2016

Whenever you post things to your collection using a textarea form element over the standard text input you can get some odd behavior when you try to render the text back from the database. Strings coming from a textarea are parsed differently because they will have unicode spaces   attached to them to indicate line breaks.

If you don't clean the text on the backend for whatever reason before rendering it, you can apply some CSS3 fixes on the frontend to render the text correctly. Please note that these may not work in all browsers.

If you just want standard behavior from your paragraphs, meaning you want them to break into the next line when they reach the edge of your container you can apply this rule to your text:

word-wrap: break-word;

See more info on word-wrap here

Let's say you'd also like to show your text as a summary and have it cut off after a certain point. You can use these rules to achieve that:

text-overflow: ellipsis;
overflow: hidden;

And that's that.

Have Big Dreams?

We can achieve so much more when we work together! Feel free to follow me on social media so we can exchange memes.