How to text-align CENTER when using overflow HIDDEN? - html

Question

I have this:
<div style="line-height:50px;;white-space:nowrap;overflow:hidden;width:120px;height:50px;text-align:center;">
<span style="padding:20px;">aaaaaaaaaaaaaaa</span>
</div>
I removed some code to display it clean. The all code return this:
I want to horizontally text-align it to center. Keep in mind that I am also "clipping" the text, so it is not displaying all the text on purpose.

Answer 1

For the effect you want to achieve, you can use a combination of absolute positioning and CSS transform. The logic is to offset the inner span to the mid-point of its containing parent (therefore left: 50%), and the move it backwards by half of its own width, therefore effectively centering it within the parent (using transform: translateX(-50%)). You might want to use vendor prefixes for the CSS transform, and be aware that it is not supported in legacy browsers.
div {
background-color: #ccc;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
width: 120px;
height: 50px;
position: relative;
}
span {
display: block;
padding: 0 20px;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
}
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/VCaEQ/

Answer 2

That space left of the aaaaaa's is just your padding:20px on the span.
Put that padding:20px; on the containing div, and..
Make your span another div, and then put the overflow:hidden on that inside div
Live example: http://jsfiddle.net/Hebj4/
HTML
<div id="div1">
<div id="div2">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
CSS
#div1 {
width:120px;
height:50px;
padding:0px 20px 0px 20px;
line-height:50px;
text-align:center;
white-space:nowrap;
background-color: #777777;
}
#div2 {
overflow:hidden;
}