Can overflow text be centered?

Question

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 elem

Answer 1

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!

Answer 2

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;
}

Answer 3

To make the solution work for multi-line text, you can modify Nathan's solution by changing the #inner left from 50% to 25%.

Answer 4

Try

word-wrap:break-word;

instead of:

white-space:nowrap;

or do you only want it on one line?

Answer 5

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.

Answer 6

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.