左右溢出文字

如何以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與演示我在說什麼。

來源

2012-12-24 mehulkar

看到這個演示：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-24 10:54:59

不是最完美的解決方案，但它似乎工作。

HTML：

<div class="page"> 
    <div> 
     SOMEHEADER 
    </div> 
</div>

CSS：

.page > div { 
    margin: 0 -1000%; 
}

實施例：http://jsfiddle.net/grc4/w36mX/

此方法通過拉伸所述內股利，使得其足夠寬以完全適應其內容（不包裹/溢出）。然後將內容居中（text-align: center）並通過外部div剪輯（overflow: hidden）。

棘手的部分是讓內部足夠寬足以適應文本。每當它不夠寬時，文本就會溢出到右側，從而導致文本沒有正確居中（如您在原始jsFiddle中所看到的那樣）。

通過使用negative margins，可以將元素向左右兩側拉伸一定量。例如，如果您知道文本的大小是400px，那麼您可以使用margin: 0 -200px來確保內部div總是至少400px寬（200px到左邊，200px到右邊）。當您不知道文本的確切大小時，您可以使用百分比或非常高的px值。

margin: 0 -100%會將div的原始大小的100％拉伸到左邊，100％再次拉伸到右邊，這使得它比.page div大3倍。該文本寬度大約爲900px，因此如果.page div的寬度低於300像素，則此方法將停止工作（嘗試在jsFiddle中調整瀏覽器的大小，以查看我的意思）。

margin: 0 -1000%伸展div使它大21倍，這通常足以適應文本。

來源

2012-12-24 10:56:11 grc

+1比我的解決方案簡單得多 –

這個效果很好。你能解釋它爲什麼能起作用嗎？「-1000％」是什麼？另外，'-100％'似乎也一樣？ – mehulkar

我已經添加了解釋。 – grc

左右溢出文字

回答

相關問題