我必須將文本包裝在一個div中，該div的width屬性設(shè)置為auto。

我必須接受用戶的輸入，并顯示出來。有時用戶在輸入數(shù)據(jù)時沒有空格。到目前為止，普通字符串在沒有任何樣式的情況下包裝良好。但是沒有空格的長字符串從容器中溢出。 這里我想使用“自動換行:斷字；使文本換行。但是在指定div的具體寬度時，它是有效的。但是當(dāng)我指定寬度的時候，我的布局在瀏覽器中會被破壞。

有沒有什么解決方案可以在不指定寬度屬性的情況下使用自動換行(應(yīng)該可以在所有瀏覽器中使用)？

下面是使用表格的另一個版本:

<div class="break-word-container">
    very_long_word_without_spaces
</div>

這里是風(fēng)格:

.break-word-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}

最后，我對我的布局做了一點小小的改動，這給了所有瀏覽器一個標(biāo)準(zhǔn)的結(jié)果。

在我的div中添加了一個表格(這里我的表格只有一行& amp一列)。 給表格賦予以下樣式-“表格布局:固定；寬度:100%；自動換行:斷字；" 現(xiàn)在用戶輸入將進(jìn)入表格& amp它包裝小單詞，如果長單詞從容器中溢出，則將其斷開。

我在我的web應(yīng)用程序中使用了以下風(fēng)格，它們在不同的瀏覽器中都能很好地工作。

.longText {
word-break: break-all;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap;  /* CSS 2.1 */
white-space: pre-line; /* CSS 3 */
word-wrap: break-word; /* IE */
}

.longTextWrapper td {
white-space: pre-line;
}

希望它也能幫助你。

<fieldset style="overflow: auto;width:100%">  
   <h:panelGrid columns="1" styleClass="longTextWrapper ">
     <h:outputText styleClass="longText" value="this is a very long messageeeeeeeeeeeeeeeeeeee...."  />
   </h:panelGrid>
  </fieldset>

使用溢出換行:break-word；這將有助于進(jìn)一步的參考，你可以在這里檢查

您可以使用“div { word-wrap:break-word；寬度:自動；顯示:內(nèi)嵌；}". 如果沒有足夠的空間，就會破壞作品。它可以在所有瀏覽器上運行。

對我來說，下面的css代替了自動換行

word-break: break-word;
width: auto;