{"id":2148,"date":"2017-03-24T19:15:56","date_gmt":"2017-03-24T13:45:56","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2148"},"modified":"2017-03-28T16:20:06","modified_gmt":"2017-03-28T10:50:06","slug":"wrap-text-pre-tag","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/wrap-text-pre-tag\/","title":{"rendered":"[Solved -10 Answers] CSS &#8211; How to wrap text in a pre tag"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li><b>pre tags <\/b>are super-useful for code blocks in HTML and for debugging output while writing scripts, but how to make the text word-wrap instead of printing out one long line?<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<h4 id=\"css\"><span style=\"color: #800000;\"><b>CSS:<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%20%0A%7B%0A%20%20%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20Since%20CSS%202.1%20*%2F%0A%20%20%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>This works great to wrap text and maintain white-space within the pre-tag:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%0A%7B%0A%20%20%20%20white-space%3A%20pre-wrap%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Skipping the pre tag and using white-space: pre-wrap on a div is a better solution.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20style%3D%22white-space%3A%20pre-wrap%3B%22%3Econtent%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>You can either use this:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%20%0A%7B%0A%20white-space%3A%20normal%3B%20%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li>to maintain the monospace font but add word-wrap,<\/li>\n<\/ul>\n<p><b>or<\/b><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%20%0A%7B%0A%20overflow%3A%20auto%3B%20%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>which will allow a fixed size with horizontal scrolling for long lines.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Try this :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%20%20pre%20%0A%7B%0A%20%20%20%20%20%20%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20CSS%203%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20%20%20%20%20%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%20%20%20%20%20%20%20%20padding%3A0px%3B%0A%20%20%20%20%20%20%20%20margin%3A0px%0A%20%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>You can try using this code :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cpre%20style%3D%22white-space%3Anormal%3B%22%3E.%20\u2033 message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>To get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)<\/li>\n<\/ul>\n<h4 id=\"css-2\"><span style=\"color: #0000ff;\"><b>CSS:<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dxmp%0A%7B%20%0Awhite-space%3Apre-wrap%3B%20word-wrap%3Abreak-word%3B%20%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h4 id=\"html\"><span style=\"color: #800000;\"><strong>HTML:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cxmp%3E%20your%20text%20or%20code%20%3C%2Fxmp%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<p>This is one of the solution :<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%0A%20%7B%0A%20%20%20%20white-space%3A%20normal%3B%0A%20%20%20%20word-wrap%3A%20break-word%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Text in <pre> tags doesn\u2019t wrap by default. If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2F*%20Browser%20specific%20(not%20valid)%20styles%20to%20make%20preformatted%20text%20wrap%20*%2Fpre%20%7B%0A%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20css-3%20*%2F%0A%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>All you need to do is add this one pieces of code to your stylesheet and your text will wrap nicely.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dpre%20%0A%7B%0A%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20css-3%20*%2F%0A%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how to make the text word-wrap instead of printing out one long line? SOLUTION 1: CSS: [pastacode lang=\u201dcss\u201d manual=\u201dpre%20%0A%7B%0A%20%20%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20Since%20CSS%202.1%20*%2F%0A%20%20%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] SOLUTION 2: This works great to wrap text and maintain white-space within [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4603,4598,4600,4602,4596,4597,4595,4605,4591,4592,4599,4604,4594,4601,4593],"class_list":["post-2148","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-bootstrap-pre-tag","tag-bootstrap-pre-word-wrap","tag-css-pre-tag-styling","tag-css-white-space-pre-wrap","tag-css-white-space-property","tag-everything-you-need-to-know-about-htmls-pre-element","tag-how-to-wrap-text-within-the-tag-using-css","tag-html-pre-line-break","tag-javascript-how-to-wrap-text-in-pre-tag-in-html","tag-make-pre-text-wrap","tag-pre-tag-word-wrap","tag-pre-line-vs-pre-wrap","tag-tag-word-wrap","tag-white-space-pre-wrap-not-working","tag-wrapping-text-inside-pre-tags"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2148"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2148\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}