{"id":313,"date":"2011-07-20T15:37:28","date_gmt":"2011-07-20T15:37:28","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=313"},"modified":"2011-07-20T15:38:06","modified_gmt":"2011-07-20T15:38:06","slug":"css-line-height-word-wrap-vs-line-break","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/css-line-height-word-wrap-vs-line-break\/","title":{"rendered":"CSS line-height &#8211; word wrap vs. line break"},"content":{"rendered":"<p>I&#39;ve noticed something about the CSS <strong>line-height<\/strong> property that surprises me a little bit. If you supply a line-height of say, 1.5 em, to a given element, it will apply that line-height to any automatic word-wrapping that occurs.<\/p>\n<p>So, if you have a paragraph, such as:<\/p>\n<p><code>&lt;p style=&quot;width: 100px; line-height: 1.5em;&quot;&gt;<br \/>\n\t&nbsp; This is a very narrow paragraph used to demonstrate&lt;br \/&gt;the line-height property.<br \/>\n\t&lt;\/p&gt;<br \/>\n\t<\/code><\/p>\n<p>You&#39;ll notice that both the &quot;hard&quot; line-break and the automatic word-wrap have the 1.5em line-height applied. This may or may not be desired, depending on your needs.<\/p>\n<p>To avoid this, I&#39;ve found that applying the line-height specifically to the &lt;br \/&gt; elements does the trick.<\/p>\n<p><code>p { line-height: 1em; }<br \/>\n\tp br { line-height: 1.5em; } <\/code><\/p>\n<p>\n\t&nbsp;<\/p>\n<p>There may be a better solution to this. If you are in the know, please comment!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#39;ve noticed something about the CSS line-height property that surprises me a little bit. If you supply a line-height of say, 1.5 em, to a&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[90],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/313"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":0,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}