如何在不指定宽度的情况下对 div 使用“word-wrap:break-word”答案

【问题标题】：How to use "word-wrap:break-word" for a div without specifying width如何在不指定宽度的情况下对 div 使用“word-wrap:break-word”
【发布时间】：2013-11-08 04:46:42
【问题描述】：

我必须将文本包装在一个宽度属性设置为自动的 div 中。

我必须接受用户的输入并显示它。有时用户输入的数据没有空格。到目前为止，普通字符串包装得很好，没有任何样式。但是没有空格的长字符串会从容器中溢出。在这里我想使用“word-wrap:break-word;”换行文本。但是在为 div 指定特定宽度时它正在工作。但是当我指定宽度时，我的布局会在浏览器中损坏。

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

【问题讨论】：

在 FF 中使用 word-wrap:break-word;text-align: justify; 对我有用。
我尝试使用“word-break:break-word;” （注意：它不是标准的 CSS 规范），它适用于 Chrome 和 Safari。但在 Firefox 和 IE 中没有用。在 FF 和 IE 中是否有任何解决方法？

标签： html css

【解决方案1】：

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

在我的 div 中添加了一个表格（这里我的表格将只有一行和一列）。
给定表格的以下样式 - “table-layout: fixed;width: 100%;word-wrap: break-word;”

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

【讨论】：

你能提供一个jsfiddle吗？我无法重现此行为。
这是一个非常棒的解决方案。基本上，归结为，当您使用带有width:100%; 的流体布局时，某些流体容器（例如 div 和 span）不会断字。但是把需要破坏的东西封装起来，用上面CSS的table div——修复了~

【解决方案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;
}

【讨论】：

这应该是明显的答案，它将元素的样式设置为像 OPs 解决方案一样，而不是添加多余的标记 - 干得好 Tomasz

【解决方案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>

【讨论】：

这里分词：break-all;打破所有的词，不管长词。我得把小字包起来，把长字打断。

【解决方案4】：

使用overflow-wrap: break-word; 可以进一步参考，您可以查看here

【讨论】：

不指定div的宽度是不行的

【解决方案5】：

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

【讨论】：