如何在没有指定宽度的情况下为div使用“word-wrap：break-word”

Question

我必须将文本包装在一个div中，该div的width属性设置为auto。

我必须从用户那里获取输入并且必须显示它。有时用户输入的数据没有空格。到目前为止，正常的字符串包装没有任何样式。但是没有空格的长字符串会从容器中溢出。在这里，我想使用“word-wrap：break-word;”包装文本。但是在为div指定特定宽度时它正在工作。但是当我指定宽度时，我的布局在整个浏览器中都是破坏的。

是否有任何解决方案使用自动换行而不指定宽度属性（它应该适用于所有浏览器）？

Answer 1

最后，我对我的布局做了一些小改动，给出了所有浏览器的标准结果。

1. 在我的div中添加了一个表（这里我的表只有一行和一列）。
2. 给出表的以下样式 - “table-layout：fixed; width：100％; word-wrap：break-word;”

现在用户输入将进入表格并且它包装小单词，如果它们从容器中溢出则会中断长单词。

Answer 2

这是使用表的另一个版本：

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

Answer 3

我为我的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>

Answer 4

你可以使用“div {word-wrap：break-word; width：auto; display：inline;}”。如果没有足够的空间，它将打破工作。它适用于所有浏览器。

Answer 5

使用overflow-wrap: break-word;它将工作进一步参考你可以检查here