Jquery ui Div宽度与文本一致

请帮助我使用这个CSS结构

我需要最大宽度为240px的div，它应该居中对齐（文本左对齐），它应该根据文本的方式选择宽度：

1） 。如果文本较少，则div宽度将与文本一致

2） 。但如果文本较大，则div必须扩展到240px，并将文本放在省略号中

请建议

请参阅以下代码：

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

.showHide{溢出：隐藏；最大宽度：240px；边距：4px；左侧边距：自动；右侧边距：自动；字体重量：正常；}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
受影响的客户
日期
-------------这里有更多的div，如上所述-------------------

这是你的工作：）

---

这是我想到的。将您的div包装在父div中。将父div上的文本居中对齐。然后显示：inline阻止子div。请参见下文

HTML

这是一个工作样本

---

请发布您已经拥有的代码，以便我们可以帮助您改进。我已发布代码。div应显示为

内联块

我已编辑并发布代码结构。您可以帮助我吗。

span

无效，因为

display:table外部div（showHide）与文本不一致。表示如果文本为“asdf”，则它将覆盖文本。但在这里它是固定的。而且任何结构都可以。thanksquit
.showHide
：
{display:table；}
椭圆，表不能一起工作
<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>

div{
width: auto;
max-width: 240px;     
background-color: red;   
}
p{
word-wrap: normal;
overflow-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

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

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

<div class='mydiv'>
    <div class='mydiv2'>
        Hello World
    </div>
</div>

.mydiv{
    background: #ccc;
    text-align: center;
}   
.mydiv2{
    background: #00CC00;
    display: inline-block;
    max-width: 240px;
}