{"id":196786,"date":"2015-02-26T08:47:48","date_gmt":"2015-02-26T15:47:48","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=196786"},"modified":"2015-02-26T08:47:49","modified_gmt":"2015-02-26T15:47:49","slug":"text-align-last","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","title":{"rendered":"text-align-last"},"content":{"rendered":"<p><code>text-align-last<\/code> lets you control the alignment of the last (or only) line of text right before a forced line break &mdash; for example the end of a paragraph or the line right before a <code>&lt;br&gt;<\/code> tag. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.intro-graph {\r\n  text-align-last: center;\r\n}<\/code><\/pre>\n<p>At the time of this writing, only Mozilla browsers and Internet Explorer support <code>text-align-last<\/code> (with vendor prefixes), and each has a slightly different implementation. The property was supposed to start working in Chrome 35, but as of Chrome 40 it still requires the experimental web platforms flag. More detail on browser implementations in the <a href=\"#points-of-interest\">Points of Interest<\/a>.<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>left<\/code> aligns the last line of text to the left of the container.<\/li>\n<li><code>right<\/code>aligns the last line of text to the right of the container.<\/li>\n<li><code>center<\/code> centers the last line of text within the container. <\/li>\n<li><code>justify<\/code> justifies the last line of text so it spans the full width of the container, inserting space between words if needed to increase the line length.<\/li>\n<li><code>start<\/code> aligns the text to the &#8220;start&#8221; of the line based on the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\">direction<\/a><\/code> of the text &mdash; left for <abbr title=\"Left to Right\">LTR<\/abbr> languages, right for <abbr title=\"Right to Left\">RTL<\/abbr> languages. <\/li>\n<li><code>end<\/code> aligns the last line to the &#8220;end&#8221; of the line based on the <code>direction<\/code> of the text &mdash; right for <abbr title=\"Left to Right\">LTR<\/abbr> languages, left for <abbr title=\"Right to Left\">RTL<\/abbr> languages. <\/li>\n<li><code>auto<\/code> the default. Aligns the last line of text to match the element&#8217;s <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/\">text-align<\/a><\/code> property, if it is set. If it is not set, <code>auto<\/code> aligns the text to the start.<\/li>\n<li><code>inherit<\/code> applies the <code>text-align-last<\/code> property of the parent element.<\/li>\n<\/ul>\n<h3>Demo<\/h3>\n<p>This demo shows the different <code>text-align-last<\/code> values in action. <strong>Note:<\/strong> Internet Explorer does not support the <code>start<\/code> or <code>end<\/code> values.<\/p>\n<p data-height=\"600\" style=\"height: 600px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"azGree\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/azGree\/\" rel=\"noopener\">text-align-last<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3 id=\"points-of-interest\">Points of Interest<\/h3>\n<p>In Internet Explorer, <code>text-align-last<\/code> only works when the <code>text-align<\/code> of the rest of the text in the selected element is set to <code>justify<\/code>. Also, IE does not recognize the <code>start<\/code> or <code>end<\/code> value.<\/p>\n<p>In Mozilla browsers, <code>text-align-last<\/code> will work on the last line before a forced line break even if there is no alignment specified for the rest of the text in the element. <\/p>\n<p>It&#8217;s also worth knowing that <code>text-align-last<\/code> sets the alignment for <em>all<\/em> last lines within the selected element, not just the absolute last line of text. So, for example, if you have a <code>div<\/code> with five paragraphs in it, your <code>text-align-last<\/code> declaration will apply to the last line of each of the paragraphs. <\/p>\n<p>If you want to use <code>text-align-last<\/code> on only the very last line in the container, you may be able to use <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-child\/\">:last-child<\/a><\/code> or <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-of-type\/\">:last-of-type<\/a><\/code>. Your CSS would look something like this:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">#center-only-last p:last-child {\r\n  -ms-text-align-last: center;\r\n  -moz-text-align-last: center;\r\n  text-align-last: center;\r\n}<\/code><\/pre>\n<p>In the demo below, the left side shows <code>text-align-last: center;<\/code> applied to a div with multiple paragraphs inside it. Notice that the last line of each paragraph is centered. The right side shows <code>text-align-last: center;<\/code> applied only to the last paragraph inside the div using <code>:last-child<\/code>. <\/p>\n<p data-height=\"600\" style=\"height: 600px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"bNKbNp\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/bNKbNp\/\" rel=\"noopener\">text-align-last<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/\">text-align<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-indent\/\">text-indent<\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css-text-3\/#text-align-last-property\" rel=\"noopener\">text-align-last in the CSS Text Module Level 3 (W3C)<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-align-last\" rel=\"noopener\">text-align-last at MDN<\/a><\/li>\n<li><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/ie\/ms531163%28v=vs.85%29.aspx\" rel=\"noopener\">text-align-last at MSDN<\/a><\/li>\n<li><a href=\"http:\/\/blogs.adobe.com\/webplatform\/2014\/02\/25\/improving-your-sites-visual-details-css3-text-align-last\/\" rel=\"noopener\">text-align-last on Adobe&#8217;s web platform team blog<\/a><\/li>\n<li><a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=76173\" rel=\"noopener\">Webkit Bug 76173, regarding Chrome&#8217;s implementation of <code>text-align-last<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep-nope\">35+ with experimental flags<\/td>\n<td class=\"nope\">Nope<\/td>\n<td class=\"yep\">34+ (prefixed)<\/td>\n<td class=\"nope\">Nope<\/td>\n<td class=\"yep\">5.5+ (prefixed)<\/td>\n<td class=\"nope\">Nope<\/td>\n<td class=\"nope\">Nope<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break &mdash; for example the end of a paragraph or the line right before a &lt;br&gt; tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and Internet Explorer support text-align-last [&hellip;]<\/p>\n","protected":false},"author":33562,"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":[],"acf":[],"jetpack-related-posts":[{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":196786,"position":0},"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":194885,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","url_meta":{"origin":196786,"position":1},"title":"object-position","date":"February 3, 2015","format":false,"excerpt":"The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it. img { object-position: right bottom; } An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;. While it\u2019s probably most common to see\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14110,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/","url_meta":{"origin":196786,"position":2},"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":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":196786,"position":3},"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":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":196786,"position":4},"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":198664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","url_meta":{"origin":196786,"position":5},"title":"text-underline-position","date":"April 3, 2015","format":false,"excerpt":"The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. .element { text-underline-position: under; } Values These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation: auto: the default. The browser will decide between placing the\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196786"}],"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\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=196786"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196786\/revisions"}],"predecessor-version":[{"id":196851,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196786\/revisions\/196851"}],"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=196786"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}