Kann Überlauftext zentriert werden?

69

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?

Nathan Ryan
quelle
Benötigen Sie das white-space: nowrap;? Wenn nicht, wird der Text zentriert angezeigt.
Feeela
4
@feeela: Ich habe verwendet white-space:nowrap, um den Text in einer einzigen Zeile zu halten, was das gewünschte Verhalten ist.
Nathan Ryan

Antworten:

102

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.

Nemo64
quelle
2
Oh Gott sei Dank für negative Margen! Ich habe -99pxanstelle von% value ein overflow: hidden
untergeordnetes
2
@ Aziz wahrscheinlich. Ich definiere aber nur Eigenschaften, die ich benutze.
Nemo64
2
Für MSEdge, wenn Sie Flexbox verwenden können - dann setzen display: flex; justify-content: center;auf die divWerke besser Cross-Browser. jsfiddle.net/jfroom/2u5x1hmj/1 @ Nemo64 ein Update in Betracht ziehen?
jfroom
2
Das funktioniert überhaupt nicht, oder? Versuchen Sie, das Div 15px breit anstatt 100px zu machen, und die Dinge werden nicht mehr zentriert.
Clément
1
@Gaurav Ich denke, es gibt keine Möglichkeit, dies zu erreichen, ohne dass alle Zeilen gleich überlaufen, wie folgt : jsfiddle.net/ew52qj7b/1 Sie könnten sich die Silbentrennung ansehen, aber die Browserunterstützung ist nicht so gut für die automatische Silbentrennung: caniuse. com / # feat = css-Bindestriche, aber je nach Situation können Sie & schüchtern; Bindestriche an einer bestimmten Stelle zuzulassen.
Nemo64
21

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!

LarAng
quelle
Nur ein Kopf hoch. Dies funktioniert nicht in IE11 und älter (auch nicht mit dem Autoprefixer).
Taylan
1
Dies sollte die akzeptierte Antwort sein, da sie eine mehrzeilige Überlaufzentrierung ermöglicht
Gabriel Llamas
14

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;
}
Nathan Ryan
quelle
4
"Div Magie zur Rettung." Nun, und DIV-Suppe zur Rettung auch ... aber eine knifflige Lösung
Feeela
@feeela: stimmte zu, dass divs zu einem wirbelnden Durcheinander werden können, weshalb ich sie aus dem HTML-Code herauslasse und das komplexere DOM mit JavaScript erstelle, wenn die Seite geladen wird.
Nathan Ryan
2
Dies könnte eine Option sein: jsfiddle.net/PdER5 . Ich poste es absichtlich nicht als Antwort, da es gründlich getestet werden muss, um sicherzustellen, dass es nichts Seltsames bewirkt, wenn es auf Ihrer tatsächlichen Seite in einem der Browser verwendet wird, die Sie unterstützen müssen.
dreißig Punkte
@thirtydot: bricht ab, wenn die Breite des Textes mehr als doppelt so groß ist wie die "Zufallszahl", obwohl er in der Praxis groß genug sein könnte, dass es kein Problem darstellt
Nathan Ryan
@thirtydot IMHO eine coolere Lösung, aber die negativen Ränder sind keine "Zufallszahl", sondern der linke Positionierungsabstand plus die halbe DIVBreite.
Feeela
0

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.

Feeela
quelle
Netter Gedanke mit text-indent. Es kann margin-leftin meiner Lösung mit dem gleichen Ergebnis ersetzen .
Nathan Ryan
0

Versuchen

word-wrap:break-word;

Anstatt von:

white-space:nowrap;

oder willst du es nur in einer Zeile?

FraserK
quelle
Dies ist eine seltsame Anforderung. Warum muss es aus dem Element herauslaufen?
FraserK
1
Das Element ist effektiv eine Form, der Text eine Beschriftung. Ich versuche, bestimmte Arten von Diagrammen mit minimalem JavaScript zu erstellen.
Nathan Ryan
Warum nicht versuchen, den Hintergrund als Bild zu haben und das Bild dann auf No-Repeat und zentriert einzustellen? Zum Beispiel jsfiddle.net/C4BBS/1 Sie können sehen, dass der Rand die tatsächliche Breite des Div zeigt, aber der BG ist zentriert
FraserK
Einige Dinge wie der Rand sind immer noch chaotisch, und es wäre zusätzlicher Code erforderlich, um Benutzerereignisse für das Element zu verarbeiten.
Nathan Ryan
Welche Ereignisse sind wahrscheinlich? Die Ränder werden nicht benötigt, aber ich habe sie dort gelassen, damit Sie sehen können, dass die tatsächliche Breite des Elements.
FraserK
0

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>
malko
quelle
Mit der Textlänge
unglücklich,
Schön, eine Ebene weniger verschachtelte Elemente.
Nathan Ryan
@dirtydot: Mist, hoffte. Ich frage mich, ob es einen Weg gibt, es zum Laufen zu bringen.
Nathan Ryan
0

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.

Edmond Chui
quelle
0

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.

atwixtor
quelle