Div width in accordance to text - jquery-ui

Question

please help me with this CSS structure.
I need div with max width 240px , it should be center aligned(text left aligned), it should take width according to text means:
1). if text is less, then div width will be in accordance to text.
2). But if text is large , then div must expand upto 240px and put the text in ellipses
Please suggest.
Please see below code :
<style>
.showHide{overflow:hidden;max-width:240px;margin:4px;margin-left:auto;margin- right:auto;font-weight:normal;}
</style>
<div id="showHide" class="showHide">
<div>
<span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 158px;display: inline-block;margin:4px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<div>
<span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 158px;display: inline-block;margin:4px;">Customers_impacted</span>
</div>
<div>
<span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 158px;display: inline-block;margin:4px;">Date</span>
</div>
-------------more divs here as above-------------------
</div>

Answer 1

<div>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
</div>
css
div{
width: auto;
max-width: 240px;
background-color: red;
}
p{
word-wrap: normal;
overflow-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
this is your job :)
<div id="showHide" class="showHide">
<div><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div>
<p>Customers_impacted</p>
</div>
<div>
<p>Date</p>
</div>
-------------more divs here as above-------------------
</div>
css
.showHide{
/**/
word-wrap: normal;
overflow-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/**/
max-width:240px;
margin:4px auto;
background-color: red;
}
p{
width: 158px;
word-wrap: normal;
overflow-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px auto;
text-align: center;
background-color: green;
}

Answer 2

Here's what i came up with. Wrap your div in a parent div. Center align text on the parent div. Then display: inline-block the child div. See below.
HTML
<div class='mydiv'>
<div class='mydiv2'>
Hello World
</div>
</div>
CSS
.mydiv{
background: #ccc;
text-align: center;
}
.mydiv2{
background: #00CC00;
display: inline-block;
max-width: 240px;
}
Here's a working sample.
http://jsfiddle.net/h6Y63/1/