Question

请帮我解决这个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>

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

这是你的工作：）

<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

这是我想出的。将div放在父div中。居中对齐父div上的文本。然后显示：内联阻止子div。见下文。

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

这是一个工作样本。

http://jsfiddle.net/h6Y63/1/

Div宽度按照文字

2 个答案: