可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
text-align-last is supposed to work in all modern browsers. Im using Chrome 38 and this css property doesn't seem to work - in Deverloper Tools, it strikes out this line.
Any ideas why it would happen? Maybe a Chrome 38 bug? I've found out that it was some kind of an issue in past version of Chrome.
[October 30, 2016 Edit: I'm pretty late with this, but if anyone still finds this answer, text-align-last is supported since Chrome 47, released in December 2015]
回答1:
It has not been implemented in Chrome. There is a bug set to RESOLVED FIXED, but there does not seem to be any information about an actual fix having been implemented. MDN info says that there is support from Chrome 35 but links to this bug.
In dev tools in Chrome 38 the declaration is struck-out but a tooltip text says that the property value is invalid. In Chrome 40 this has been fixed: the tooltip says that the property name is invalid (meaning that it is not recognized/supported by the browser). Enabling “Experimental Web Platform Features” does not seem to help. So the property remains unimplemented.
Edit: As noted in the question now, Chrome supports the feature from version 47, and browser support is good (though not perfect) otherwise, too, see http://caniuse.com/#feat=css-text-align-last
回答2:
Baseline positioning varies in browsers. That is why text-align-last in Chrome is behaving different. Explained here with 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. Inline images use the bottom edge of the image as the baseline
2. So add an empty inline-block strut to the div to position the baseline for the entire line.