{"id":3033,"date":"2017-01-22T18:15:47","date_gmt":"2017-01-23T00:15:47","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2071"},"modified":"2017-01-22T18:15:47","modified_gmt":"2017-01-23T00:15:47","slug":"csss-word-wrap-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/csss-word-wrap-property\/","title":{"rendered":"CSS’s Word-Wrap Property"},"content":{"rendered":"

CSS\u2019s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line.<\/span><\/p>\n

Let\u2019s say you had a really long word that was taking up way too much space, like in the image below:<\/span><\/p>\n

\"Screen<\/p>\n

\n

\n

If you wanted the word to stay within its boundaries (the container that the paragraph is in is only supposed to be 250px wide), you can use the word-wrap property to tell the code that it\u2019s okay to break up the word to keep it contained to the confines of its parent div. Here\u2019s what your CSS would need to look like:<\/span><\/p>\n

p{
\nword-wrap: break-word;
\n}<\/p>\n

Now your text should look like this:
\n<\/span><\/p>\n

\"Screen<\/p>\n

You\u2019ll see that the word is now cut off almost in the middle. This isn\u2019t the default in CSS because it doesn\u2019t always look great, but there are definitely times when you\u2019ll need to use word-wrap property to make sure the text doesn\u2019t overflow and maintain the integrity of your divs.<\/span><\/p>\n

\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

CSS\u2019s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line.<\/p>\n

Let\u2019s […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2799,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3033"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3033"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3033\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2799"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}