按照文本

Question

的div寬度，請幫我用這個CSS結構。

我需要分度，最大寬度240像素，它應該是中心對準（文本左對齊），但是應該根據文本採取寬度是指：

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上的文本。然後顯示：inline-block子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/