Question

如何使用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;
}

这是一个fiddle，其中包含我正在谈论的内容的演示。

Answer 1

不是最优雅的解决方案，但似乎有效。

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，此方法将停止工作（尝试使用margin: 0 -100%在jsFiddle中调整浏览器大小以查看我的意思。）

margin: 0 -1000%拉伸div使其大21倍，这通常足以适合文本。

Answer 2

请参阅此演示：http://jsfiddle.net/QZCuY/3/我已在最新的Chrome，FF和IE7-9中对其进行了测试

HTML（<div class="text">已添加）：

<div class="page">
    <div class="text">
        SOMEHEADER
    </div>
</div>
<p> 
    How do I get the header to overflow left <u>and</u> right instead of just to the right?
</p>

CSS（.page有两个新属性和新的.text类）：

body {
    background-color:green;
}
.page {
    position:relative;
    height:1em;

    overflow:hidden;
    background-color:red;
    width:70%;
    text-align:center;
    margin:0 auto;
    font-size:8em;
    word-wrap:none;
}
p {
    width:70%;
    margin:50px auto 0;
    text-align:center;
    font-size:2em;
}

.text {
    position:absolute;
    right:-50%;
    left:-50%;
}

左右两侧溢出文本

2 个答案: