Wenn ich text-align:center
fü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:center
fü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?
white-space: nowrap;
? Wenn nicht, wird der Text zentriert angezeigt.white-space:nowrap
, um den Text in einer einzigen Zeile zu halten, was das gewünschte Verhalten ist.Antworten:
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.
quelle
-99px
anstelle von% value einoverflow: hidden
display: flex; justify-content: center;
auf diediv
Werke besser Cross-Browser. jsfiddle.net/jfroom/2u5x1hmj/1 @ Nemo64 ein Update in Betracht ziehen?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!
quelle
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; }
quelle
DIV
Breite.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 (zuerstDIV
in Ihrem Beispiel). Keine bessere Idee hier im Moment.quelle
text-indent
. Es kannmargin-left
in meiner Lösung mit dem gleichen Ergebnis ersetzen .Versuchen
word-wrap:break-word;
Anstatt von:
white-space:nowrap;
oder willst du es nur in einer Zeile?
quelle
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>
quelle
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.
quelle
Gib dem Innersten
div
etwasmargin: 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.quelle