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

nfs0ujit 于 2023-05-19 发布在其他

关注(0)|答案(6)|浏览(162)

我必须将文本 Package 在一个div中，该div的width属性设置为auto。
我必须接受用户的输入并显示它。有时用户输入的数据没有空格。正常字符串 Package 罚款到目前为止没有任何风格。但是没有空格的长字符串会从容器中溢出。这里我想用“词-绕：断-词;”来换行。但是当指定div的特定宽度时，它是有效的。但是当我指定宽度时，我的布局在浏览器中被破坏了。
有没有解决方案使用自动换行而不指定宽度属性（它应该在所有浏览器中工作）？

css

来源：https://stackoverflow.com/questions/19651293/how-to-use-word-wrapbreak-word-for-a-div-without-specifying-width

6条答案

按热度按时间

dgjrabp21#

下面是使用table的另一个版本：

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

赞(0）回复(0）举报 2023-05-19

ebdffaop2#

最后，我在布局上做了一个小的改变，在所有浏览器中给出了一个标准的结果。
1.在我的div中添加了一个表（这里我的表将只有一行和一列）。
1.将以下样式赋予表格-“table-layout：固定;宽度：100%;自动换行：中断字; ”
现在，用户输入将进入表中&它 Package 小单词，如果长单词从容器中溢出，则将其打断。

赞(0）回复(0）举报 2023-05-19

flmtquvp3#

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

赞(0）回复(0）举报 2023-05-19

xxls0lw84#

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

赞(0）回复(0）举报 2023-05-19

wpx232ag5#

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

赞(0）回复(0）举报 2023-05-19

cuxqih216#

对于我的情况下，下面的css做的工作，而不是文字 Package