Überlauftext auf der linken und rechten

Wie zentriere ich Text mit CSS, so dass es sowohl nach links und rechts überläuft? Ich sehe hier Fragen, den Textüberlauf statt von rechts nach links zu machen, aber ich mag es aussehen wie der Text in gezoomt wirdÜberlauftext auf der linken und rechten

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

.page { 
    overflow:hidden; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
}

hier ein fiddle mit einer Demo von wovon ich rede.

Quelle

2012-12-24 mehulkar

diese Demo Siehe: http://jsfiddle.net/QZCuY/3/ Ich habe sie in neueste Chrome getestet, FF und IE7-9

HTML (<div class="text"> addiert):

<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 hat zwei neue Eigenschaften und neuen .text-Klasse):

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%; 
}

Quelle

2012-12-24 10:54:59

Nicht die eleganteste Lösung, aber es scheint zu funktionieren.

HTML:

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

CSS:

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

Beispiel: http://jsfiddle.net/grc4/w36mX/

Dieses Verfahren durch Strecken des inneren div arbeitet so, dass sie breit genug ist, seinen Inhalt vollständig passen (ohne Wickeln/Überlaufen). Der Inhalt wird dann zentriert (text-align: center) und durch das äußere div (overflow: hidden) zugeschnitten.

Der schwierige Teil ist die innere div breit genug, um den Text zu passen. Immer wenn es nicht breit genug ist, wird der Text nach rechts überlaufen, so dass es nicht richtig zentriert ist (wie in Ihrem ursprünglichen jsFiddle gesehen).

von negative margins verwenden, können Sie links sowohl um einen bestimmten Betrag, um das Element strecken und rechts. Wenn Sie wissen, dass die Größe des Textes beispielsweise 400 px ist, können Sie margin: 0 -200px verwenden, um sicherzustellen, dass das innere div immer mindestens 400 Pixel breit ist (200 Pixel nach links und 200 Pixel nach rechts). Wenn Sie die genaue Größe des Textes nicht kennen, können Sie entweder Prozentsätze oder einen wirklich hohen px-Wert verwenden.

margin: 0 -100% würde div um 100% seiner ursprünglichen Größe nach links und 100% wieder nach rechts dehnen, was es 3 mal größer als die .page div ist. Der Text bezieht sich auf 900px breit, so dass diese Methode arbeiten würde aufhören, wenn die .page div unter 300px weiteten (versuchen Sie Ihren Browser jsFiddle Ändern der Größe mit margin: 0 -100% zu sehen, was ich meine).

margin: 0 -1000% dehnt die div es 21-mal größer zu machen, die in der Regel genug, um den Text zu passen.

Quelle

2012-12-24 10:56:11 grc

+1 Wirklich einfachere Lösung als meine –

Dies funktioniert gut. Kannst du erklären, warum es funktioniert? '-1000%' von was? Auch "-100%" scheint gleich zu funktionieren? – mehulkar

Ich habe eine Erklärung hinzugefügt. – grc

Überlauftext auf der linken und rechten

Antwort

Verwandte Themen