{"id":540,"date":"2019-03-13T14:58:51","date_gmt":"2019-03-13T17:58:51","guid":{"rendered":"https:\/\/benjaminray.com\/codebase\/?p=540"},"modified":"2019-03-13T16:01:55","modified_gmt":"2019-03-13T19:01:55","slug":"preserve-white-space-in-static-text-without-using-pre-tag","status":"publish","type":"post","link":"https:\/\/benjaminray.com\/codebase\/preserve-white-space-in-static-text-without-using-pre-tag\/","title":{"rendered":"Preserve White Space in Static Text Without Using PRE Tag"},"content":{"rendered":"<p>When displaying multi-line text (e.g. input from a TextArea) in a static element (e.g. DIV), extra white space and line breaks are ignored, resulting in one long line of text.<\/p>\n<p>An older approach used to be to replace any line breaks with the <code>&lt;br \/&gt;<\/code> tag, but there is a better approach that doesn't involve editing the content itself:<\/p>\n<p>The CSS property <code>white-space<\/code> values <code>pre<\/code>, <code>pre-wrap<\/code>, and <code>pre-line<\/code> are three options to control how white space and line breaks are displayed. To preserve both extra white space and line breaks, the <code>pre-wrap<\/code> value is the best choice. (<code>pre<\/code> preserves white spaces and line breaks, but doesn't wrap. <code>pre-line<\/code> preserves line breaks, but strips extra white space.)<\/p>\n<p><strong>Input:<\/strong><\/p>\n<pre><code>&lt;div style=\"white-space: pre-wrap; max-width: 50%; border: 1px solid #ddd;\"&gt;\nSome long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps.\nShort entry with    extra    white    space.\n\n\nTwo extra lines above\n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>Output:<\/strong><br \/>\n<!-- Output is simulated, as WordPress replaces line breaks with P tags --><\/p>\n<div style=\"white-space: pre-wrap; max-width: 50%; border: 1px solid #ddd;\">Some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps some long text that wraps.<br \/>Short entry with    extra    white    space.<\/p>\n<p>Two extra lines above<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When displaying multi-line text (e.g. input from a TextArea) in a static element (e.g. DIV), extra white space and line breaks are ignored, resulting in one long line of text.  [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[16],"tags":[],"class_list":["post-540","post","type-post","status-publish","format-standard","hentry","category-css"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GNjN-8I","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/comments?post=540"}],"version-history":[{"count":51,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/540\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/540\/revisions\/591"}],"wp:attachment":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/media?parent=540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/categories?post=540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/tags?post=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}