如何使用CSS中心文本以使其左右两侧溢出？我在这里看到的问题是文本溢出而不是正确,但我希望它看起来像文本放大了.
<body>
<div class="page">
SOMEHEADER
</div>
</body>
–
.page {
overflow:hidden;
width:70%;
text-align:center;
margin:0 auto;
font-size:8em;
word-wrap:none;
}
解决方法
不是最优雅的解决方案,但它似乎工作.
HTML：
<div class="page">
<div>
SOMEHEADER
</div>
</div>
CSS：
.page > div {
margin: 0 -1000%;
}
示例：http://jsfiddle.net/grc4/w36mX/
这种方法的工作原理是拉伸内部div,使其宽度足以完全适合其内容(不包裹/溢出).然后内容居中(text-align：center)并通过外部div(overflow：hidden)剪裁为大小.
棘手的部分是使内部div足够宽以适应文本.每当它不够宽时,文本将向右溢出,使其不能正确居中(如原始jsFiddle中所示).
通过使用negative margins,您可以将元素向左和向右拉伸一定量.如果你知道文本的大小是400px,那么你可以使用margin：0 -200px来确保内部div总是至少400px宽(左边200px,右边200px).如果您不知道文本的确切大小,可以使用百分比或非常高的px值.
margin：0 -100％会将div的原始大小的100％向左拉伸,100％再向右伸展,使其比.page div大3倍.文本宽度约为900px,因此如果.page div的宽度低于300px,此方法将停止工作(尝试使用jsFiddle调整浏览器的大小：0-100％以查看我的意思).
margin：0 -1000％拉伸div使其大21倍,这通常足以适合文本.
