{"id":257413,"date":"2017-08-08T04:49:26","date_gmt":"2017-08-08T11:49:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=257413"},"modified":"2020-04-25T05:48:06","modified_gmt":"2020-04-25T12:48:06","slug":"text-justify","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-justify\/","title":{"rendered":"text-justify"},"content":{"rendered":"\n<p>The <code>text-justify<\/code> property in CSS is a companion to the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/\"><code>text-align<\/code><\/a> property that is used to set the justification method of text when <code>text-align<\/code> is set to the <code>justify<\/code> value.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">p {\n  text-align: justify;\n  text-justify: inter-word;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>inter-word<\/code>: Specifies that text is justified by adjusting the spacing between words, effectively creating additional word spacing. This is effectively a variation of the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/\"><code>word-spacing<\/code><\/a> property.<\/li><li><code>inter-character<\/code>: Specifies that text is justfiied by adjusting the spacing between characters, effectively creating additional character spacing. This is effectively a variation of the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\"><code>letter-spacing<\/code><\/a> property.<\/li><li><code>auto<\/code>: Allows the browser to determine whether justification is better handled as <code>inter-word<\/code> or <code>inter-character<\/code>. This can be helpful in multi-lingual scenarios where the content language is unknown until rendered, allowing the browser user agent to choose accordingly based on which method better fits the language context.<\/li><li><code>none<\/code>: Disables justification methods, effectively removing any justification opportunities, or overriding where a justification method may occur in the cascade.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image align-none media-257414\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/justify-text-figure-1.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-exactly-is-justification\">What exactly is justification?<\/h3>\n\n\n<p>Justified text is a fancy way of saying how text fills the box that contains it. In fact, you may already be well acquainted with justifying text and don&#8217;t even know it. If you have ever used text editing software like Word and Google Docs, then you might be familiar with these icons:<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-257415\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/justify-text-figure-2.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Text align and justification options in the Google Docs toolbar<\/figcaption><\/figure>\n\n\n\n<p>Those first three set the text alignment, just like the CSS <code>text-align<\/code> property, where the text can be aligned to the left, right or completely centered.<\/p>\n\n\n\n<p>That fourth icon is the justify option and it tells the content to fill the entire width of the document so that each line is flush right to the edge, regardless of whether it affects the spacing between words.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-257416\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/justify-text-figure-3.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>Justifying content in Google Docs adds spacing between words to occupy the full document width at each line<\/figcaption><\/figure>\n\n\n\n<p>The <code>text-justify<\/code> property allows us to do the same, but with additional flexibility to determine whether the spacing method used to justify the content is managed between words or characters.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p>The <code>text-justify<\/code> property is included in the <a href=\"https:\/\/drafts.csswg.org\/css-text-3\/#text-justify-property\" rel=\"noopener\">CSS Text Module Level 3<\/a> specification, which is currently in Editor&#8217;s Draft status at the time of this writing.<\/p>\n\n\n\n<p>This property is currently listed as &#8220;at risk&#8221; of being dropped in the Candidate Recommendation period. As such, it is not recommended to use this property in production as it is unlikely to be adopted as a standard across all browsers in the near future.<\/p>\n\n\n\n<p>Current support is limited to Firefox 55+. Internet Explorer 11 and Edge 14+ also support the property, but only the <code>inter-word<\/code> value as well as unofficial values not included in the W3C specification.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-text-justify\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"n nope\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">55<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">18<\/span><\/td><td class=\"n nope\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"n nope\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"n nope\" title=\"Android - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value.<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13949,"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":[1327],"acf":[],"jetpack-related-posts":[{"id":196786,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","url_meta":{"origin":257413,"position":0},"title":"text-align-last","date":"February 26, 2015","format":false,"excerpt":"text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break \u2014 for example the end of a paragraph or the line right before a tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14110,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/","url_meta":{"origin":257413,"position":1},"title":"text-align","date":"September 6, 2011","format":false,"excerpt":"The text-align property in CSS is used for aligning the inner content of a block element. p { text-align: center; } These are the traditional values for text-align: left - The default value. Content aligns along the left side. right - Content aligns along the right side. center - Content\u2026","rel":"","context":"With 28 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250613,"url":"https:\/\/css-tricks.com\/snippets\/css\/star-wars-crawl-text\/","url_meta":{"origin":257413,"position":2},"title":"Star Wars Crawl Text","date":"January 31, 2017","format":false,"excerpt":"The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand new at the time. We can achieve a similar effect\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/crawl.png?fit=1200%2C693&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":257413,"position":3},"title":"place-content","date":"May 13, 2021","format":false,"excerpt":"The place-content property in CSS is shorthand for the align-content and justify-content properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-content and justify-content are values that align an individual item in the block and inline directions. .element { display: flex; place-content: start space-evenly; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":257413,"position":4},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":257413,"position":5},"title":"justify-self","date":"March 18, 2021","format":false,"excerpt":"The justify-self property in CSS sets the justification of an element within its containing block. Its behavior depends on the display of the containing block. For example, if the containing block is a grid container (i.e. display: grid), we can justify the element in it along the \"inline\" axis (which,\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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/257413"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=257413"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/257413\/revisions"}],"predecessor-version":[{"id":307606,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/257413\/revisions\/307606"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=257413"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=257413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}