Take the 2-minute tour ×

Using CSS, it's easy to horizontally center text in a container using text-align:center;, but if any single word of that text is larger than the width of the container, the browser automatically "clips" to the left boundary of the container (as in, the over-sized word aligns with the left side of the too-small container, and without the CSS word-break:hyphenate; property setting (or similar) the over-sized word sticks out past the right edge of the container.

enter image description hereAny way to float this pic left of my text here to save vertical space? Oh well. Anyway...

Without using a child container element to hold the text, is there a way to center the over-sized word so that it hangs over both left and right sides of the container equally?

Again, I do not want to use a text container within the container. I could do this in 5 seconds by using a child <div>text to be centered</div> with fixed width and negative margin-left, or with absolute positioning of a container element inside a relative div, but I'm looking for a CSS attribute that will center text even when the word is too long to fit the width. By default, text-align:center doesn't do this.

Thoughts? Thanks! -Slink

share|improve this question
add comment

2 Answers

up vote 9 down vote accepted

This fiddle shows three div elements illustrating the "problem" and both the following "solutions".

One Possible "Solution"

I'm not sure of your needs, but so far the only real solution I have found is to set display: table to your text container. But that will allow the container to stretch to the needed width to contain the longest word, which may not be desirable to you. If that is okay, that is the best solution.

Another Possible "Faked" Solution

If you must keep the apparent size of the element at least, then you can fake the look by some creative pseudo-element use:

.fakeIt {
    text-align: center; /* what you wanted all along */
    display: table; /* key to get centered */
    position: relative; /* allow reference for absolute element */
    z-index: 2; /* set up for a background to be pushed below */
    width: 40px; /* what you want, but table resizes larger if needed*/
    border: none; /* transferring border to the "fake" */
    background-color: transparent; /* transferring background to the "fake" */

.fakeIt:after {
    content: ''; /* before or after need it, even if empty */
    width: 40px; /* the original width you wanted for the container */
    position: absolute; /* need this to position it */
    z-index: -1; /* push it behind the foreground */
    left: 50%; /* push it to center */
    top:0; /* give it height */
    bottom: 0;  /* give it height */
    margin-left: -20px; /* half the width to finish centering */
    border: 1px solid red; /* the border you wanted on the container */
    background-color: yellow; /* the background you wanted on the container */

However, depending upon your particular application, the "faked" solution may not work. Also, the original element will still take up the wider "space" in the document, it just won't look like it is. That could cause issues. Negative margin on the container could solve that, but you don't know what the value needs to be set at, as it would differ with text width.

You mention in a comment you are not familiar with pseudo-elements in css, so you may want to have a quick intro.

share|improve this answer
Great answer with the display: table trick. –  biziclop Jul 14 '12 at 14:40
This seems like a very elegant solution. I like the concept, but is it applicable to anchor tags? <a href... ? the whole reason I can't use a child element is because my parent container is a link which is treated as an in-line element and cannot hold elements like div –  Slink Jul 15 '12 at 14:18
@Slink--Two things: 1) if it is "treated as an in-line element" then you should not be getting any overlap at all, as in-line elements expand with the text. You must have its display setting changed to something different. 2) Even if in-line, an a tag can have a span child element, and the css for both set to center the text as you want. So you are not limited as much as you think to not using a child (also, the HTML5 standard allows div in a, however, earlier standards do not... so your DOCTYPE is going to determine what freedom you have with that). –  ScottS Jul 15 '12 at 19:03
An excellent point. If I use doctype of HTML5, then I can use a child div? I wonder if that is true of all browsers, even interweb exploder. –  Slink Jul 15 '12 at 20:47
the reason I refrained from using a child element was that I thought I could not use a block display element. The <a> tag allows CSS attributes like height:100px; and width:100px; even without specifying the CSS display property. // another reason for my concern with complicating the link by including a block-type display element is that I do want the website to be friendly for web crawlers. I'm not up to snuff on Google's requirements, but I'm not sure how it would affect the website's legitimacy rating according to the Google bots –  Slink Jul 15 '12 at 20:58
show 2 more comments

That damned horizontal scrollbar!


<div class="inner">
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 


.inner {
    text-align: center;
    position: relative;
    left: +450%;
.inner:before {
    content: '';
    display: inline-block;
    margin-right: -900%;
share|improve this answer
What? You lost me. I was never aware of the :before CSS attribute, though (that's cool). I just want a CSS text attribute or other trick! margin-left or similar would be no good. ??? Thanks. –  Slink Jul 11 '12 at 18:22
This doesn't work (at least in firefox) –  Inkbug Jul 15 '12 at 9:42
Unfortunately, it's true. –  biziclop Jul 15 '12 at 9:52
add comment

Your Answer


