CSS - 设置内联元素的text-align

Question

我的导航点中包含文字（越来越短）。文本应该居中，但文本本身是左对齐的;很难解释。请看看我的照片：

上面三个是我的状态，而下三个是应该是状态。

使用display: inline我的元素具有正确的大小（即使有单词分隔符）。所以我让父text-align: center水平居中文本容器。 但：容器中的文字应为text-align: left。但是display: inline这是不可能的。

顺便说一句：display: inline-block不是一个解决方案，因为即使损坏的文本不适合，它也会将文本较长的文本拉伸到100％宽度。

见这里：http://jsfiddle.net/z5jo64bj/

有没有办法没有JavaScript 来解决这个问题？