14

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

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

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

4

5 回答 5

14

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

  1. 在我的 div 中添加了一个表格（这里我的表格只有一行和一列）。
  2. 给定表格的以下样式 - “表格布局：固定；宽度：100%；自动换行：断字； ”

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

于 2013-10-30T05:19:57.340 回答
14

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

<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;
}
于 2017-12-18T10:35:36.957 回答
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>
于 2013-10-29T07:16:22.013 回答
1

使用overflow-wrap: break-word; 它可以供进一步参考，你可以在这里查看

于 2017-12-14T07:59:56.630 回答
0

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

于 2013-10-29T07:11:04.873 回答