caniuse<\/a><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"The CSS white-space property controls how text is handled on the element it is applied to. Let’s say you have HTML exactly like this: You’ve styled the div to have a set width of 100px. At a reasonable font size, that’s too much text to fit in 100px. Without doing anything, the default white-space value […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13955,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":362360,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/","url_meta":{"origin":14136,"position":0},"title":"grid-template-columns","date":"April 25, 2022","format":false,"excerpt":"The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks and its line names. .sidebar-layout { display: grid; grid-template-columns: 300px 1fr; } It\u2019s worth noting the difference between grid lines and grid tracks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":14136,"position":1},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365263,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-rows\/","url_meta":{"origin":14136,"position":2},"title":"grid-template-rows","date":"April 25, 2022","format":false,"excerpt":"The grid-template-rows CSS property is part of the CSS Grid Layout specification, defining the rows of a grid container by specifying the size of the grid tracks and its line names. .app-layout { display: grid; grid-template-rows: auto 1fr auto; } One thing to cover before we jump into the grid-template-rows\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339498,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/","url_meta":{"origin":14136,"position":3},"title":":empty","date":"April 27, 2021","format":false,"excerpt":"The CSS :empty pseudo-class selects any element that does not contain children for a given selector. \/* Changes the background color of every empty section element *\/ section:empty { background-color: tomato; } If we were to run that code on a page, the CSS would look for a element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335415,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/","url_meta":{"origin":14136,"position":4},"title":"mask-type","date":"March 2, 2021","format":false,"excerpt":"The mask-type CSS property indicates whether the SVG element is treated as an alpha mask or a luminance mask. mask { mask-type: alpha; } When the mask layer is an image or a gradient, a mask-mode property can be set on the HTML element to specify the type of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":203844,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/","url_meta":{"origin":14136,"position":5},"title":"shape-outside","date":"June 17, 2015","format":false,"excerpt":"The shape-outside property controls how content will wrap around a floated element\u2019s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon: .element { float: left; shape-outside: circle(50%); width: 200px; height: 200px; } It\u2019s important to note that this property\u2026","rel":"","context":"In \"basic shapes\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14136"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14136"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14136\/revisions"}],"predecessor-version":[{"id":373897,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14136\/revisions\/373897"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14136"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}