{"id":39226,"date":"2017-10-31T23:01:31","date_gmt":"2017-10-31T15:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=39226"},"modified":"2025-04-04T02:50:30","modified_gmt":"2025-04-03T18:50:30","slug":"change-default-text-wrapping-html-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/","title":{"rendered":"How to Change Default Text Wrapping with HTML and CSS"},"content":{"rendered":"

Unlike paper, web pages can almost infinitely extend sideways<\/strong>. As much as impressive that is, it\u2019s not something we really need while reading. Browsers wrap text depending on the width of the text container<\/strong> and the width of the screen<\/strong> so that we can see all the text without having to scroll sideways much (only downwards).<\/p>\n

Wrapping<\/strong> is something browsers do considering many factors, such as the language of the text or the placement of punctuation and spaces\u2014they don\u2019t just push down<\/strong> what doesn\u2019t fit in the box defined for the text content.<\/p>\n

Other than wrapping, browsers also take care of the spaces<\/strong>; they merge multiple consecutive spaces in the source code into one single space on the rendered page, and they also register forced line breaks before start working on the wrapping.<\/p>\n

Read Also:<\/strong> 15 Beautiful Text Effects Created with CSS<\/a><\/p>\n

When to change default text wrapping<\/h2>\n

That\u2019s all great, and much appreciated. But, we can easily end up in circumstances where the default browser behaviour isn\u2019t what we are looking for. It can be a headline that shouldn\u2019t be wrapped<\/strong> or a word in a paragraph that better be broken than descend a line<\/strong>, leaving an odd-looking empty space at the end of the line.<\/p>\n

It may also happen that we just desperately need<\/i> those spaces preserved in our text<\/strong>, however the browser keeps combining them into one, forcing us to add multiple  <\/code> in the source code.<\/p>\n

Wrapping preferences might also change with the language and purpose of the text<\/strong>. A Mandarin news article and a French poem not necessarily need to be wrapped in the exact same way.<\/p>\n

There are a fair number of CSS properties (and HTML elements!) that can control the wrapping and the breakpoints<\/strong> and also define how spaces and line breaks are processed before wrapping<\/strong>.<\/p>\n

Soft wrap opportunities & soft wrap breaks<\/h2>\n

Browsers decide where to wrap an overflowing text depending on word boundaries, hyphens, syllables, punctuations, spaces and more<\/strong>. These places are all called soft wrap opportunities<\/a><\/strong> and when the browser does break the text at one such place, the break is called a soft wrap break<\/a><\/strong>.<\/p>\n

The simplest way to force an extra break<\/strong> can be done by using the good old <br><\/code> element.<\/p>\n

Whitespace<\/h2>\n

If you are familiar with the white-space<\/code><\/a> CSS property I bet you came to first know it in the same fashion as many others; while searching for a way to prevent the wrapping of text<\/strong>. The nowrap<\/code> value of white-space<\/code> does exactly that.<\/p>\n

However, the white-space<\/code> property is about more than just wrapping. First of all, what is whitespace? It\u2019s a set of space characters<\/strong>. Each space in the set varies from each other<\/strong> in length, direction, or both.<\/p>\n

A typical single horizontal space character<\/strong> is what we add by pressing the spacebar<\/span> key. Tab<\/span> key also adds a similar space but a with bigger length<\/strong>. Enter<\/span> key adds a vertical space<\/strong> to start a new line, and  <\/code> in HTML adds a single unbreakable space<\/strong> to web pages. Like this, there are plenty types of spaces that constitute \u201cwhitespace\u201d.<\/p>\n

As I mentioned in the beginning, browsers collapse multiple spaces<\/strong> (both horizontal and vertical) in the source into a single space. They also consider these space characters for wrapping opportunities<\/strong> (places where a text can be wrapped) when wrapping is needed.<\/p>\n

And, it\u2019s precisely these browser actions that we can control with white-space<\/code>. Note that the white-space<\/code> property doesn\u2019t affect all<\/i> kinds of space, just the most frequent ones<\/strong> such as the regular horizontal single space, tab space, and line feeds.<\/p>\n

Below, you can see a screenshot of a sample text that\u2019s wrapped by the browser to fit inside its container<\/strong>. The overflow happens at the bottom of the container and the overflown text is colored differently. You\u2019ll notice the collapse of the consecutive spaces<\/strong> in the code.<\/p>\n

\r\n<div class='textContainer'>\r\n\u2698 Hello.  \u2698 Hello.                 \u2698 Hello\r\n\r\n\u2698 Hello.\r\n\r\n\r\n\r\n\u2698 Hello.       \u2698 Hello.   \u2698 Hello.  \u2698 Hello.\r\n\u2698 Hello. \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello. \u2698 Hello.      \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\r\n\u2698 Hello. \u2698 Hello.    \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello.               \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello.   \u2698 Hello.\r\n<\/div><\/pre>\n
\r\n.textContainer {\r\n  width: 500px;\r\n  height: 320px;\r\n}\r\n<\/pre>\n
\"Text<\/figure>\n
After applying white-space: nowrap;<\/code> rule, the wrapping of the text changes in the following way:<\/p>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  white-space: nowrap;\r\n}\r\n<\/pre>\n
\"Text<\/figure>\n
The pre<\/code> value of white-space<\/code> preserves all the whitespaces<\/strong> and prevents the wrapping of the text<\/strong>:<\/p>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  white-space: pre;\r\n}\r\n<\/pre>\n
\"Text<\/figure>\n
The pre-wrap<\/code> value of white-space<\/code> preserves all the whitespaces<\/strong> and wraps the text<\/strong>:<\/p>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  white-space: pre-wrap;\r\n}\r\n<\/pre>\n
\"Text<\/figure>\n
Finally, the pre-line<\/code> value of white-space<\/code> preserves the vertical whitespaces<\/strong> such as new lines and wraps the text<\/strong>:<\/p>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  white-space: pre-line;\r\n}\r\n<\/pre>\n
\"Text<\/figure>\n
Word breaks<\/h2>\n
Another important CSS property you should know for controlling text wrap is word-break<\/code><\/a>. You can see in all the above screenshots that the browser wrapped the text before the word \u201chello\u201d<\/strong> on the right side, beyond which the text overflowed<\/strong>. The browser didn\u2019t break the word<\/strong>.<\/p>\n
However, if you have to<\/em> allow the breaking of letters in a word<\/strong> so that the text would look even at the right side you need to use the break-all<\/code> value for the word-break<\/code> property:<\/p>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  word-break: break-all;\r\n}\r\n<\/pre>\n
\"Word<\/figure>\n
The word-break<\/code> property has a third value besides break-all<\/code> and normal<\/code> (belonging to the default line breaking). The keep-all<\/code> value doesn\u2019t allow breaking of words<\/strong>.<\/p>\n
You might not be able to see the effect of keep-all<\/code> in English. But, in languages where letters in a word are meaningful units on their own<\/strong>, the browser might break the words when wrapping, and this can be prevented using keep-all<\/code>.<\/p>\n
For instance, the letters in Korean words<\/strong>, initially broken for wrapping, are kept together<\/strong> when the white-space: keep-all;<\/code> rule is specified.<\/p>\n
<div class='textContainer'>\uc138\uacc4\ub97c \ud5a5\ud55c \ub300\ud654, \uc720\ub2c8\ucf54\ub4dc\ub85c \ud558\uc2ed\uc2dc\uc624. \uc81c10\ud68c \uc720\ub2c8\ucf54\ub4dc \uad6d\uc81c \ud68c\uc758\uac00 1997\ub144 3\uc6d4 10\uc77c\ubd80\ud130 12\uc77c\uae4c\uc9c0 \ub3c5\uc77c\uc758 \ub9c8\uc778\uc988\uc5d0\uc11c \uc5f4\ub9bd\ub2c8\ub2e4. \uc9c0\uae08 \ub4f1\ub85d\ud558\uc2ed\uc2dc\uc624. \uc774 \ud68c\uc758\uc5d0\uc11c\ub294 \uc5c5\uacc4 \uc804\ubc18\uc758 \uc804\ubb38\uac00\ub4e4\uc774 \ud568\uaed8 \ubaa8\uc5ec \ub2e4\uc74c\uacfc \uac19\uc740 \ubd84\uc57c\ub97c \ub2e4\ub8f9\ub2c8\ub2e4.<\/div><\/pre>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  word-break: keep-all;\r\n}\r\n<\/pre>\n
\"Word<\/figure>\n
This property might support another value called break-word<\/code> in the future. You\u2019ll see how break-word<\/code> works later, in the \u201cOverflow wrap\u201d section of this article.<\/p>\n
Word break opportunities<\/h2>\n
Developers can also add wrap opportunities inside words<\/strong>, using the <wbr><\/code><\/a> HTML element. If  a browser needs to wrap a text string it will consider the spot where <wbr><\/code> is present for a wrapping opportunity.<\/p>\n
\r\n<div class='textContainer'>\r\n\u2698 Hello.  \u2698 Hello.                 \u2698 H<wbr>ello\r\n\r\n\u2698 Hello.\r\n\r\n\r\n\r\n\u2698 Hello.       \u2698 Hello.   \u2698 Hello.  \u2698 Hello.\r\n\u2698 Hello. \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello. \u2698 Hello.      \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\r\n\u2698 Hello. \u2698 Hello.    \u2698 Hello. \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello.               \u2698 Hello. \u2698 Hello.\r\n\u2698 Hello.   \u2698 Hello.\r\n<\/div>\r\n<\/pre>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  white-space: pre-wrap;\r\n}\r\n<\/pre>\n
\"Wrap<\/figure>\n
Without <wbr><\/code>, the whole \u201cHello\u201d word would have been rendered in a new line. By adding <wbr><\/code> to the HTML code, we informed the browser that it\u2019s okay to break the word at that point for wrapping<\/strong>, in case it\u2019s necessary.<\/p>\n
Hyphens<\/h2>\n
The hyphens<\/code><\/a> CSS property is another way to control breaks between letters<\/strong> in a word. We have a separate article<\/a> on CSS hyphenation if you\u2019re interested. In short, the property allows you to create wrapping opportunities through hyphenation<\/strong>.<\/p>\n
Its auto<\/code> value prompts the browser to automatically hyphenate and break words where needed<\/strong> while wrapping. The manual<\/code> value forces browsers to wrap (if needed) at hyphenation opportunities added by us<\/strong>, such as the hyphen character (‐) or ­<\/code> (soft hyphen). If none<\/code> was given as value there would be no wrapping done near hyphens<\/strong>.<\/p>\n
\r\n<div class='textContainer'>\r\nbluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse\r\nbluehouse bluehouse bluehouse bluehouse bluehouse\r\n<\/div>\r\n<\/pre>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  -webkit-hyphens: auto;\r\n  -ms-hyphens: auto;\r\n  hyphens: auto;\r\n}\r\n<\/pre>\n
\"Hyphens<\/figure>\n
Overflow wrap<\/h2>\n
The overflow-wrap<\/code><\/a> CSS property controls if a browser may break words<\/strong> (or preserved spaces, support for which might happen in the near future) on overflow<\/strong>. When the break-word<\/code> value is given for overflow-wrap<\/code>, the word will be broken<\/strong> in case no other soft wrap opportunities are found<\/strong> in the line.<\/p>\n
Note that overflow-wrap<\/code> is also known as word-wrap<\/code> (they are aliases).<\/p>\n
\r\n<div class='textContainer'>\r\nbluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse\r\n<\/div>\r\n<\/pre>\n
\r\n.textContainer {\r\n  \/* ... *\/\r\n  overflow-wrap: break-word;\r\n}\r\n<\/pre>\n
\"Overflow<\/figure>\n
With no space in-between the letters in the HTML code above (i.e. no wrapping opportunities), the text wasn\u2019t wrapped at first and was preserved as a single word<\/strong>.<\/p>\n
However, when the permission was given to wrap the text by breaking words (i.e. the break-word<\/code> value was given to overflow-wrap<\/code>), the wrapping happened by breaking the whole string<\/strong> wherever it was necessary.<\/p>\n
Read Also:<\/strong> Working with Text in Scalable Vector Graphics (SVG)<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it\u2019s not something we really need while reading. Browsers wrap text depending on the width of the text container and the width of the screen so that we can see all the text without having to scroll sideways much (only…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Change Default Text Wrapping with HTML and CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Change Default Text Wrapping with HTML and CSS\" \/>\n<meta property=\"og:description\" content=\"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-31T15:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:50:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Change Default Text Wrapping with HTML and CSS\",\"datePublished\":\"2017-10-31T15:01:31+00:00\",\"dateModified\":\"2025-04-03T18:50:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/\"},\"wordCount\":1193,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/change-default-text-wrapping-html-css\\\/wrapped-text.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/\",\"name\":\"How to Change Default Text Wrapping with HTML and CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/change-default-text-wrapping-html-css\\\/wrapped-text.jpg\",\"datePublished\":\"2017-10-31T15:01:31+00:00\",\"dateModified\":\"2025-04-03T18:50:30+00:00\",\"description\":\"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/change-default-text-wrapping-html-css\\\/wrapped-text.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/change-default-text-wrapping-html-css\\\/wrapped-text.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/change-default-text-wrapping-html-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Change Default Text Wrapping with HTML and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Change Default Text Wrapping with HTML and CSS - Hongkiat","description":"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Change Default Text Wrapping with HTML and CSS","og_description":"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers","og_url":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-10-31T15:01:31+00:00","article_modified_time":"2025-04-03T18:50:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Change Default Text Wrapping with HTML and CSS","datePublished":"2017-10-31T15:01:31+00:00","dateModified":"2025-04-03T18:50:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/"},"wordCount":1193,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/","url":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/","name":"How to Change Default Text Wrapping with HTML and CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg","datePublished":"2017-10-31T15:01:31+00:00","dateModified":"2025-04-03T18:50:30+00:00","description":"Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/change-default-text-wrapping-html-css\/wrapped-text.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/change-default-text-wrapping-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Change Default Text Wrapping with HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-acG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=39226"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39226\/revisions"}],"predecessor-version":[{"id":73739,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39226\/revisions\/73739"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=39226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=39226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=39226"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=39226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}