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% 右に伸ばして、div の 3 倍の大きさにし.pageます。テキストの幅は約 900px であるため、.pagediv の幅が 300px を下回ると、このメソッドは機能しなくなります (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 ( .page2 つの新しいプロパティと新しい .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 に答える