Can overflow text be centered?
CssTextOverflowCenterAlignmentCss Problem Overview
When I specify text-align:center
for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected).
When I specify text-align:center
for an element with a width that is less than the width of the text, the text is aligned to the left edge of the content box and overflows the right edge of the content box.
You can see the two cases in action here.
Can any CSS magic make the text equally overflow both the left edge and the right edge of the content box, so that it stays centered?
Css Solutions
Solution 1 - Css
I know this question is old, but I just had the same Problem and found a much easier solution with just a span. http://jsfiddle.net/7hy3w2jj/
<div>some text</div>
<div>
<span class="text-overflow-center">some text that will overflow</span>
</div>
Then you just need this definition
.text-overflow-center {
margin-left: -100%;
margin-right: -100%;
text-align: center;
}
If you can work with pseudo elements, it can be done with no html at all. Just add these definition to your text container. http://jsfiddle.net/7287L9a8/
div:before {
content: "";
margin-left: -100%;
}
div:after {
content: "";
margin-right: -100%;
}
The only downside to the pseudo variant is that it only works with one line of text.
Solution 2 - Css
This looks some old question.
Now I think there is some good answer with flex.
You can do this simply like this:
<div id="small_div">overflowing text</div>
#small_div {
display: flex;
justify-content: center;
}
That's it.
Hope much help to you!
Solution 3 - Css
Div magic to the rescue. In case anyone is interested, you can see the solution here.
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;
}
Solution 4 - Css
Strange requirement. I would expand the boxes to the texts size.
One possible solution might involve a negative text-indent: text-indent: -50px;
, but that won't work for smaller texts (first DIV
in your example). No better idea here right now.
Solution 5 - Css
Try
word-wrap:break-word;
instead of:
white-space:nowrap;
or do you only want it on one line?
Solution 6 - Css
this one seems to work: add a wrapper block with position relative and left:50% margin-left:-100% you can see it [here][1] [1]: http://jsfiddle.net/LSpCS/1/
Here's the 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>
Solution 7 - Css
To make the solution work for multi-line text, you can modify Nathan's solution by changing the #inner left from 50% to 25%.
Solution 8 - Css
Give the innermost div
some margin: 0 -50%
. If the elements are all display block or inline-block and text alignment is centered, this provides more shoulder room for the innermost element's text. At least, it works for me.