{"id":18904,"date":"2020-07-01T14:32:01","date_gmt":"2020-07-01T21:32:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18904"},"modified":"2020-07-02T09:52:19","modified_gmt":"2020-07-02T16:52:19","slug":"css-line-break","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-line-break\/","title":{"rendered":"Create Line Breaks Without Having to Use br in HTML"},"content":{"rendered":"\n<p>A line break can be added to HTML elements without having to utilize a break return <code>&lt;br&gt;<\/code> by using pseudo-elements. Pseudo-elements are used to style a specific part of an element. Here we will use ::after to style an HTML element to add a line break.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n   &lt;meta charset=&quot;UTF-8&quot;&gt;\n   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n   &lt;title&gt;CSS ::after With \\a&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;style&gt;\n   span {\n       padding: 1px 8px;\n   }\n   span::after {\n       content: '\\a';\n       white-space: pre;\n   }\n  \n&lt;\/style&gt;\n&lt;body&gt;\n   &lt;div&gt;\n       &lt;span&gt;Dumbledore&lt;\/span&gt;\n       &lt;span&gt;McGonagall&lt;\/span&gt;\n       &lt;span&gt;Snape&lt;\/span&gt;\n       &lt;span&gt;Trelawney&lt;\/span&gt;\n   &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>In the code above, we use the pseudo-element <code>::after<\/code> on each inline element (represented by the span) to add a carriage return (represented by the \u201c\\a\u201d) after the span\u2019s line of text. The <code>::after<\/code> in this case has a content property and a white space property available for us to use.&nbsp;<br><\/p>\n\n\n\n<p>The \u2018content\u2019 property describes the stuff we want injected into the span. The white-space property tells us if we are to preserve the whitespace. Leaving this particular property off doesn\u2019t interfere with the inline-block characteristic of the span. So we have to add this particular property to override that.&nbsp;<br><\/p>\n\n\n\n<p>As you mess with styling and layout more and more, you will probably find the solution above is not necessarily the best solution. If you add padding of any sort and also background, you will see that those CSS properties tend to mess with where the background comes into play. See the code example below that illustrates the point:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n   &lt;head&gt;\n       &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n       &lt;title&gt;Line Break&lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;style&gt;\n \n      \n \n       span {\n           padding: 1px 8px;\n           background: pink;\n       }\n       span::before {\n           content: &quot;\\A&quot;;\n           white-space: pre;\n       }\n   &lt;\/style&gt;\n   &lt;body&gt;\n       &lt;div&gt;\n           &lt;p&gt;Professor &lt;span&gt;Dumbledore&lt;\/span&gt;&lt;\/p&gt;\n           &lt;p&gt;Professor &lt;span&gt;McGonagall&lt;\/span&gt;&lt;\/p&gt;\n           &lt;p&gt;Professor &lt;span&gt;Snape&lt;\/span&gt;&lt;\/p&gt;\n           &lt;p&gt;Professor &lt;span&gt;Trelawney&lt;\/span&gt;&lt;\/p&gt;\n       &lt;\/div&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p>There are other solutions that offer similar outcomes to this \u2013 where the background starts on the previous line and then does a carriage return with text on the correct background in the next line. The CSS property <code>box decoration break: clone<\/code> is one that comes to mind that can be added to the span class above to achieve a similar result, but doesn\u2019t really give us the result we want.&nbsp;<br><\/p>\n\n\n\n<p>Using block level elements like<code> &lt;p&gt;<\/code> or <code>&lt;div&gt;<\/code> is a tempting solution. But what about the times where you would like to use a different display value? This brings us to the table layout option.&nbsp;<br><\/p>\n\n\n\n<p>In the code editor, in the span CSS selector, delete the properties there and replace it with display: table. Using this not only makes your code cleaner, but gives you exactly the layout you need to display the information. We are not using the table layout in the traditional sense, but it gives us exactly what we need to get the job done.<br><\/p>\n","protected":false},"excerpt":{"rendered":"A line break can be added to HTML elements without having to utilize a break return &lt;br&gt; by using pseudo-elements. Pseudo-elements are used to style a specific part of an element. Here we will use ::after to style an HTML element to add a line break.&nbsp; &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot;&hellip;","protected":false},"author":77,"featured_media":18905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18904","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":[],"is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Line Breaks Without Having to Use in HTML | Career Karma<\/title>\n<meta name=\"description\" content=\"Create Line Breaks Without Having to Use in HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-line-break\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Line Breaks Without Having to Use br in HTML\" \/>\n<meta property=\"og:description\" content=\"Create Line Breaks Without Having to Use in HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-line-break\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-01T21:32:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-02T16:52:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"668\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Create Line Breaks Without Having to Use br in HTML\",\"datePublished\":\"2020-07-01T21:32:01+00:00\",\"dateModified\":\"2020-07-02T16:52:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/\"},\"wordCount\":382,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/\",\"name\":\"Create Line Breaks Without Having to Use in HTML | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg\",\"datePublished\":\"2020-07-01T21:32:01+00:00\",\"dateModified\":\"2020-07-02T16:52:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Create Line Breaks Without Having to Use in HTML\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg\",\"width\":1000,\"height\":668},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-line-break\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create Line Breaks Without Having to Use br in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Line Breaks Without Having to Use in HTML | Career Karma","description":"Create Line Breaks Without Having to Use in HTML","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:\/\/careerkarma.com\/blog\/css-line-break\/","og_locale":"en_US","og_type":"article","og_title":"Create Line Breaks Without Having to Use br in HTML","og_description":"Create Line Breaks Without Having to Use in HTML","og_url":"https:\/\/careerkarma.com\/blog\/css-line-break\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T21:32:01+00:00","article_modified_time":"2020-07-02T16:52:19+00:00","og_image":[{"width":1000,"height":668,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Create Line Breaks Without Having to Use br in HTML","datePublished":"2020-07-01T21:32:01+00:00","dateModified":"2020-07-02T16:52:19+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/"},"wordCount":382,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-line-break\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/","url":"https:\/\/careerkarma.com\/blog\/css-line-break\/","name":"Create Line Breaks Without Having to Use in HTML | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg","datePublished":"2020-07-01T21:32:01+00:00","dateModified":"2020-07-02T16:52:19+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Create Line Breaks Without Having to Use in HTML","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-line-break\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-and-silver-laptop-computer-on-round-brown-wooden-table-1181243.jpg","width":1000,"height":668},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-line-break\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Create Line Breaks Without Having to Use br in HTML"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18904"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18905"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}