我必須將寬度屬性設置爲自動的div中的文本換行。如何在不指定寬度的情況下使用「換行:斷字」
我必須接受用戶的輸入並且必須顯示它。有時用戶輸入的數據沒有空格。正常的字符串包裝很好,但沒有任何樣式。但沒有空格的長字符串從容器溢出。 這裏我想使用「單詞換行:分詞」;包裝文字。但是在指定div的特定寬度時它正在工作。但是,當我指定寬度時,我的佈局正在破壞瀏覽器。
是否有任何解決方案使用自動換行而不指定寬度屬性(它應該可以在所有瀏覽器中運行)?
我必須將寬度屬性設置爲自動的div中的文本換行。如何在不指定寬度的情況下使用「換行:斷字」
我必須接受用戶的輸入並且必須顯示它。有時用戶輸入的數據沒有空格。正常的字符串包裝很好,但沒有任何樣式。但沒有空格的長字符串從容器溢出。 這裏我想使用「單詞換行:分詞」;包裝文字。但是在指定div的特定寬度時它正在工作。但是,當我指定寬度時,我的佈局正在破壞瀏覽器。
是否有任何解決方案使用自動換行而不指定寬度屬性(它應該可以在所有瀏覽器中運行)?
最後,我對佈局進行了小改動,它在所有瀏覽器中給出了標準結果。
現在,用戶輸入將進入表&它包裝小字,如果它們從容器溢出,則打破長字。
您可以使用「div {word-wrap:break-word; width:auto; display:inline;}」。 如果沒有足夠的空間,它會破壞工作。它將適用於所有瀏覽器。
我對我的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>
這裏的單詞:break-all;打破所有的詞語,而不考慮長詞。我必須包裝小字,並打破冗長的單詞。 – Awesome
使用overflow-wrap: break-word;
這將進一步參考工作ü可以檢查here
下面是使用表的另一個版本:
<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;
}
這是工作對於我來說,在FF中使用'word-wrap:break-word; text-align:justify;'。 –
我試着用「單詞分解:分詞」; (注意:它不是一個標準的CSS規範),它在Chrome和Safari中運行良好。但在Firefox和IE中無用。 FF&IE中有沒有解決這個問題的方法? – Awesome