如何在没有指定宽度的情况下为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;
}