clip or ellipses text difficulties with css centered page - css

Question

So I have some php outputted text/data that's centered on my page. I've centered it like this with css
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;
}
#data {
position: absolute;
width: 100%; /*makes the element 100%, to center it. */
top: 180px;
right: 0px;
line-height: 40px;
}
I'd like to make the data a truncated output, where after a certain amount of space it cuts the output off and gives a "...".
text-overflow: ellipsis;
If I can't get that to work, I'm okay with a
text-overflow: clip;
Thing is, I can't get it to work with my existing css, I believe because to have the text-overflow work, I have to set the width to a specific size. But, when I do this and remove the width 100% on my data, no longer is it centered nicely.
*By the way the reason for the two css divs before data, is that it keeps my entire page centered regardless of any resizing, which is helpful.
Any thoughts on how to get this working, in this situation? A bit stuck.
Thanks so much.

Answer 1

You can get by using following css approach
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
}
.content {
width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>