Geek Answers Handbook

CSS: text-align-last not working in chrome?

text-align-last should work in all modern browsers. I am using Chrome 38 and this css property does not seem to work - in Deverloper Tools it removes this line.

Any ideas why this will happen? Maybe the error is Chrome 38? I found out that this was some kind of problem in a previous version of Chrome.

[October 30, 2016 Editing: I'm pretty late with this, but if someone still finds this answer, text-alignment-last with Chrome 47 released in December 2015 is supported]

+7
css google-chrome
source share
2 answers

It was not implemented in Chrome. There is a bug installed in RESOLVED FIXED, but there seems to be no information about the actual fix that was implemented. MDN info says there is support from Chrome 35, but links to this error.

In dev tools in Chrome 38, the declaration is strikethrough, but the tooltip text says that the property value is not valid. This is fixed in Chrome 40: the tooltip states that the property name is not valid (this means that the browser is not recognized / supported by the browser). Enabling the "Experimental Web Platform Features" does not seem to help. Thus, the property remains unrealized.

Edit: As already mentioned in the question, Chrome has supported this feature since version 47, and browser support is good (although not perfect), otherwise see http://caniuse.com/#feat=css-text-align- last

+2
source share

Basic positioning varies in browsers. This is why text-align-last in Chrome behaves differently. Explained here with a possible fix

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text

HTML

<div> <span class="letter">T</span> <span class="strut"></span> <div>

CSS

 div { width: 100px; height: 100px; border: thin black solid; } .letter { font-size: 100px; line-height: 0px; background-color: #9BBCE3; } .strut { display: inline-block; height: 100px; }

Summary
1. Embedded images use the bottom edge of the image as the baseline
2. Therefore, add an empty line string line to the div to position the baseline for the entire line.

-2
source share

More articles:


All Articles