{"id":250373,"date":"2017-01-24T07:06:03","date_gmt":"2017-01-24T14:06:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=250373"},"modified":"2017-03-26T12:05:10","modified_gmt":"2017-03-26T19:05:10","slug":"need-lorem-ipsum-inside-html","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/need-lorem-ipsum-inside-html\/","title":{"rendered":"Need Lorem Ipsum? Inside HTML?"},"content":{"rendered":"<p><a href=\"http:\/\/emmet.io\/\" rel=\"noopener\">Emmet<\/a> is great for that. With it installed in the code editor you are using, you can type &#8220;lorem&#8221; and then tab and it will expand into a paragraph of Lorem Ipsum placeholder text. But it can do more! You can control how much you get, place it within HTML structure as it expands, and get different bits of it in repeated elements.<\/p>\n<p><!--more--><\/p>\n<h3>Put lorem ipsum in a paragraph<\/h3><figcaption><video src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/01\/p-lorem.mov\" controls><\/figcaption><h3>A list of lorem ipsum<\/h3><figcaption><video src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/01\/li-lorem.mov\" controls><\/figcaption><h3>Modules with fake content<\/h3><figcaption><video src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/01\/module-lorem.mov\" controls><\/figcaption><h3>A complete document<\/h3><figcaption><video src=\"https:\/\/css-tricks.com\/videos\/doc-lorem.mov\" controls><\/figcaption>\n","protected":false},"excerpt":{"rendered":"<p>Emmet is great for that. With it installed in the code editor you are using, you can type &#8220;lorem&#8221; and then tab and it will expand into a paragraph of Lorem Ipsum placeholder text. But it can do more! You can control how much you get, place it within HTML structure as it expands, and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":250386,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1198,1199],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/ipsum.png?fit=864%2C237&ssl=1","jetpack-related-posts":[{"id":302263,"url":"https:\/\/css-tricks.com\/what-does-revert-do-in-css\/","url_meta":{"origin":250373,"position":0},"title":"What does &#8220;revert&#8221; do in CSS?","date":"January 27, 2020","format":false,"excerpt":"Miriam\u00a0Suzanne explains in a Mozilla Developer video on the subject. The revert value in CSS \"resets\" a property back to it's inherited value, only going as far back as the UA stylesheet. That's critical, as it won't reset a <p> to inline, for example, because a <p> is a block-level\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/higher-order-components.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377635,"url":"https:\/\/css-tricks.com\/the-power-of-has-in-css\/","url_meta":{"origin":250373,"position":1},"title":"The Power of :has() in CSS","date":"March 29, 2024","format":false,"excerpt":"Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but has gained popularity in the front end community by delivering control over various elements in your UI. Let\u2019s take a look\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":":has CSS selector","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/has-selector.png?fit=1160%2C856&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14850,"url":"https:\/\/css-tricks.com\/yesno-ipsum\/","url_meta":{"origin":250373,"position":2},"title":"Yes\/No Ipsum!","date":"November 9, 2011","format":false,"excerpt":"I've heard a number of people make statements lately like: \"If you're using Lorem Ipsum text, just stop it.\" Or similar. That argument, expanded, goes something like this. Design exists to serve content. Lorem ipsum is fake content. If you're already designing, and you are using fake content, you are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306134,"url":"https:\/\/css-tricks.com\/building-a-scalable-css-architecture-with-bem-and-utility-classes\/","url_meta":{"origin":250373,"position":3},"title":"Building a Scalable CSS Architecture With BEM and Utility Classes","date":"April 21, 2020","format":false,"excerpt":"Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals: Efficiency: we want to reduce the time spent thinking about how things should be done\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/website-sketch.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297310,"url":"https:\/\/css-tricks.com\/float-element-in-the-middle-of-a-paragraph\/","url_meta":{"origin":250373,"position":4},"title":"Float Element in the Middle of a Paragraph","date":"November 4, 2019","format":false,"excerpt":"Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at the top. It's doable, but it's certainly in the realm of CSS trickery! One thing you can do is slap\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15939,"url":"https:\/\/css-tricks.com\/better-tabs-with-round-out-borders\/","url_meta":{"origin":250373,"position":5},"title":"(Better) Tabs with Round Out Borders","date":"January 10, 2012","format":false,"excerpt":"A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-1.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/ipsum.png?fit=864%2C237&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250373"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=250373"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250373\/revisions"}],"predecessor-version":[{"id":250397,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250373\/revisions\/250397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/250386"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=250373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}