Kann Überlauftext zentriert werden?

Wenn ich text-align:centerfür ein Element mit einer Breite spezifiziere , die größer als die Breite des Texts ist, wird der Text (wie erwartet) im Inhaltsfeld des Elements zentriert.

Wenn ich text-align:centerfür ein Element mit einer Breite spezifiziere , die kleiner als die Breite des Texts ist, wird der Text am linken Rand des Inhaltsfelds ausgerichtet und läuft über den rechten Rand des Inhaltsfelds.

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

Kann eine CSS-Magie dazu führen, dass der Text sowohl am linken als auch am rechten Rand des Inhaltsfelds gleichmäßig überläuft, sodass er zentriert bleibt?

Ich weiß, dass diese Frage alt ist, aber ich hatte gerade das gleiche Problem und fand eine viel einfachere Lösung mit nur einer Zeitspanne. 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 noch diese Definition

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

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

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

Der einzige Nachteil der Pseudovariante ist, dass sie nur mit einer Textzeile funktioniert.

Das sieht nach einer alten Frage aus.

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

Sie können dies einfach so machen:

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

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

Das ist es.

Hoffe viel Hilfe für dich!

Div Magie zur Rettung. Falls jemand interessiert ist, 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;
}

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

Eine mögliche Lösung könnte einen negativen Texteinzug beinhalten: Dies text-indent: -50px;funktioniert jedoch nicht für kleinere Texte (zuerst DIVin Ihrem Beispiel). Keine bessere Idee hier im Moment.

Versuchen

word-wrap:break-word;

Anstatt von:

white-space:nowrap;

oder willst du es nur in einer Zeile?

Dieser scheint zu funktionieren: Fügen Sie einen Wrapper-Block mit relativer und linker Position hinzu: 50% Rand-links: -100% Sie können ihn hier sehen. 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>

Damit die Lösung für mehrzeiligen Text funktioniert, können Sie Nathans Lösung ändern, indem Sie den #inner links von 50% auf 25% ändern.

Gib dem Innersten divetwas margin: 0 -50%. Wenn alle Elemente Anzeigeblock oder Inline-Block sind und die Textausrichtung zentriert ist, bietet dies mehr Schulterraum für den Text des innersten Elements. Zumindest funktioniert es bei mir.