wake-up-neo.net

Kann Überlauftext zentriert werden?

Wenn ich text-align:center für ein Element mit einer Breite angeben, die größer als die Breite des Textes ist, wird der Text innerhalb des Inhaltsfelds des Elements zentriert (wie erwartet).

Wenn ich text-align:center für ein Element mit einer Breite unter dem Textbreite vorgeben, wird der Text am linken Rand des Inhaltsfelds ausgerichtet und überlappt den rechten Rand des Inhaltsfelds.

Sie können die beiden Fälle in Aktion hier sehen.

Kann jede CSS-Magie den Text sowohl den linken als auch den rechten Rand des Inhaltsfelds gleichmäßig überlaufen lassen, sodass er zentriert bleibt?

csstextoverflowcenteralignment
47
Nathan Ryan

Ich weiß, dass diese Frage alt ist, aber ich hatte nur das gleiche Problem und fand eine viel einfachere Lösung mit nur einer Spannweite . http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

Dann brauchen Sie nur diese Definition

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

Wenn Sie mit Pseudo-Elementen arbeiten können, kann dies ganz ohne HTML erfolgen .. Fügen Sie diese Definition einfach zu Ihrem Textcontainer hinzu. http://jsfiddle.net/7287L9a8/

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

Der einzige Nachteil der Pseudo-Variante besteht darin, dass sie nur mit einer Textzeile funktioniert.

80
Nemo64

Div-Magie zur Rettung. Bei Interesse können Sie die Lösung hier sehen.

HTML:

<div id="outer">
    <div id="inner">
        <div id="text">some text</div>
    </div>
</div>
<div id="outer">
    <div id="inner">
        <div id="text">some text that will overflow</div>
    </div>
</div>

CSS:

#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
}
#inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left Edge of text to center */
    left: 50%;
}
#text {
    /* shift left Edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
}
15
Nathan Ryan

Das sieht nach einer alten Frage aus.

Jetzt denke ich, dass es mit flex eine gute Antwort gibt.

Das kannst du einfach so machen:

<div id="small_div">overflowing text</div>

#small_div {
    display: flex;
    justify-content: center;
}

Das ist es.

Ich hoffe viel Hilfe für Sie!

5
Alex

Geben Sie der innersten div einen margin: 0 -50%. Wenn alle Elemente Anzeigeblock oder Inline-Block sind und die Textausrichtung zentriert ist, bietet dies mehr Schulterraum für den innersten Elementtext. Zumindest funktioniert es bei mir.

0
atwixtor

Seltsame Anforderung. Ich würde die Boxen auf die Textgröße erweitern.

Eine mögliche Lösung könnte einen negativen Einzug von Text beinhalten: text-indent: -50px;, aber das funktioniert nicht bei kleineren Texten (erste DIV in Ihrem Beispiel). Keine bessere Idee jetzt.

0
feeela

Versuchen 

Word-wrap:break-Word;

anstatt:

white-space:nowrap;

oder willst du es nur in einer Zeile?

0
FraserK

dies scheint zu funktionieren: Fügen Sie einen Wrapper-Block mit relativer Position und Links hinzu: 50% margin-left: -100% Sie können es sehen hier Hier ist der Code:

<style>
div {
    display: block;
    position: relative;
    left: 100px;
    height:1.5em;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid black;
    background-color: silver;
}
span{
    display:block;
    position:relative;
    left:50%;
    margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>
0
malko

Damit die Lösung für mehrzeiligen Text funktioniert, können Sie die Lösung von Nathan ändern, indem Sie die linke Zahl von 50% in 25% ändern.

0
Edmond Chui