2013-10-29 84 views
9

我必須將寬度屬性設置爲自動的div中的文本換行。如何在不指定寬度的情況下使用「換行:斷字」

我必須接受用戶的輸入並且必須顯示它。有時用戶輸入的數據沒有空格。正常的字符串包裝很好,但沒有任何樣式。但沒有空格的長字符串從容器溢出。 這裏我想使用「單詞換行:分詞」;包裝文字。但是在指定div的特定寬度時它正在工作。但是,當我指定寬度時,我的佈局正在破壞瀏覽器。

是否有任何解決方案使用自動換行而不指定寬度屬性(它應該可以在所有瀏覽器中運行)?

+0

這是工作對於我來說,在FF中使用'word-wrap:break-word; text-align:justify;'。 –

+0

我試着用「單詞分解:分詞」; (注意:它不是一個標準的CSS規範),它在Chrome和Safari中運行良好。但在Firefox和IE中無用。 FF&IE中有沒有解決這個問題的方法? – Awesome

回答

12

最後,我對佈局進行了小改動,它在所有瀏覽器中給出了標準結果。

  1. 在我的div中添加了一個表格(這裏我的表格只有一行&一列)。
  2. 鑑於以下樣式表 - 「表格的佈局:固定;寬度:100%;自動換行:打破字;

現在,用戶輸入將進入表&它包裝小字,如果它們從容器溢出,則打破長字。

+0

你能提供一個jsfiddle嗎?我無法重現此行爲。 – BernardV

+0

這是一個非常棒的解決方案。基本上,最重要的是,當你使用寬度爲100%的流體佈局時,一些流體容器(例如div和span)不會出現文字中斷的情況。但封裝需要打破的東西,用上面的CSS表格div - 修復它〜 – cake

+0

偉大的解決方案! –

1

您可以使用「div {word-wrap:break-word; width:auto; display:inline;}」。 如果沒有足夠的空間,它會破壞工作。它將適用於所有瀏覽器。

1

我對我的web應用程序使用以下樣式,並且它們在不同的瀏覽器中正常工作。

.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> 
+0

這裏的單詞:break-all;打破所有的詞語,而不考慮長詞。我必須包裝小字,並打破冗長的單詞。 – Awesome

1

使用overflow-wrap: break-word;這將進一步參考工作ü可以檢查here

3

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

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

和這裏的風格:

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