如何使用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;
}
这是一个关于我正在谈论的演示的小提琴.
grc*_*grc 12
不是最优雅的解决方案,但它似乎工作.
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中所示).
通过使用负边距,您可以将元素拉伸一定量到左侧和右侧.如果你知道文本的大小是400px,那么你可以margin: 0 -200px用来确保内部div总是至少400px宽(左边200px,右边200px).如果您不知道文本的确切大小,可以使用百分比或非常高的px值.
margin: 0 -100%将div的原始大小的100%向左拉伸,再向右拉伸100%,使其比.pagediv 大3倍.文本大约900px宽,所以如果.pagediv低于300px 宽,这个方法将停止工作(尝试在jsFiddle中调整浏览器大小margin: 0 -100%以查看我的意思).
margin: 0 -1000% 拉伸div使其大21倍,这通常足以适合文本.
请参阅此演示：http://jsfiddle.net/QZCuY/3/我已经在最新的 Chrome、FF 和 IE7-9 中测试了它
\n\nHTML（<div class="text">已添加）：
<div class="page">\n <div class="text">\n SOMEHEADER\n </div>\n</div>\n<p> \n How do I get the header to overflow left <u>and</u> right instead of just to the right?\n</p>\n\xe2\x80\x8bCSS （.page有两个新属性和新的 .text 类）：
body {\n background-color:green;\n}\n.page {\n position:relative;\n height:1em;\n\n overflow:hidden;\n background-color:red;\n width:70%;\n text-align:center;\n margin:0 auto;\n font-size:8em;\n word-wrap:none;\n}\np {\n width:70%;\n margin:50px auto 0;\n text-align:center;\n font-size:2em;\n}\n\n.text {\n position:absolute;\n right:-50%;\n left:-50%;\n}\n\xe2\x80\x8b\n