可以溢出文本居中？
当我指定text-align:center宽度大于文本宽度的元素时，文本在元素的内容框中居中（如预期的那样）。
当我指定text-align:center为宽度小于文本宽度的元素时，文本将与内容框的左边缘alignment，并溢出内容框的右边缘。
你可以在这里看到两个案例。
任何CSS魔法都可以使文本同时溢出内容框的左边缘和右边缘，从而保持居中？
我知道这个问题是旧的，但我只是有同样的问题，并find一个简单的解决scheme，只有一个跨度。 http://jsfiddle.net/7hy3w2jj/
<div>some text</div> <div> <span class="text-overflow-center">some text that will overflow</span> </div>
那么你只需要这个定义
.text-overflow-center { margin-left: -100%; margin-right: -100%; text-align: center; }
如果您可以使用伪元素，那么可以完全不使用html。 只需将这些定义添加到文本容器中。 http://jsfiddle.net/7287L9a8/
div:before { content: ""; margin-left: -100%; } div:after { content: ""; margin-right: -100%; }
伪变体唯一的缺点是只能用一行文本。
魔术师来拯救。 如果有人有兴趣，你可以在这里看到解决scheme。
HTML：
<div id="outer"> <div id="inner"> <div id="text">some text</div> </div> </div> <div id="outer"> <div id="inner"> <div id="text">some text that will overflow</div> </div> </div>
CSS：
#outer { display: block; position: relative; left: 100px; width: 100px; border: 1px solid black; background-color: silver; } #inner { /* shrink-to-fit width */ display: inline-block; position: relative; /* shift left edge of text to center */ left: 50%; } #text { /* shift left edge of text half distance to left */ margin-left: -50%; /* text should all be on one line */ white-space: nowrap; }
奇怪的要求。 我会扩大框的文字大小。
一个可能的解决scheme可能涉及一个负面的文本缩进： text-indent: -50px; ，但是对于较小的文本则不起作用（在你的例子中是第一个DIV ）。 现在没有比这更好的主意了。
尝试
word-wrap:break-word;
代替：
white-space:nowrap;
或者你只想在一条线上？
这似乎工作：添加一个包装块与位置相对和左：50％余量：-100％，你可以在这里看到这里是代码：
<style> div { display: block; position: relative; left: 100px; height:1.5em; width: 100px; text-align: center; white-space: nowrap; border: 1px solid black; background-color: silver; } span{ display:block; position:relative; left:50%; margin-left:-100%; } </style> <div><span>some text</span></div> <div><span>some text that will overflow</span></div>
为了使解决scheme适用于多行文本，您可以通过将#inner从50％更改为25％来修改Nathan的解决scheme。
给最里面的div一些margin: 0 -50% 。 如果元素都是显示块或内联块，并且文本alignment居中，则为最内层元素的文本提供更多的空间。 至less，它对我有用。
