9

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

这是我正在谈论的演示的小提琴。

4

2 回答 2

16

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

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 倍。文本大约 900 像素宽，所以如果.pagediv 宽度低于 300 像素，此方法将停止工作（尝试在 jsFiddle 中调整浏览器的大小margin: 0 -100%以了解我的意思）。

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

于 2012-12-24T10:56:11.230 回答
1

请参阅此演示： 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%;
}
​
于 2012-12-24T10:54:59.383 回答