可调整大小的 div 上的 CSS 自动换行答案

【问题标题】：CSS word-wrap on resizable divs可调整大小的 div 上的 CSS 自动换行
【发布时间】：2014-02-10 09:56:26
【问题描述】：

我正在尝试在 div 中使用 CSS 属性 word-wrap 和值 break-word。

它工作得很好，但前提是我指定了宽度（如果这个值是自动的，自动换行不起作用）。

问题是我希望 div 可以调整大小，所以我不能在开头键入 div 的特定宽度。

有什么办法可以解决这个问题吗？我不想使用连字符。

提前谢谢你。

这不起作用：

<p style="word-wrap: break-word !important;">loooooooooong_word</p>

这工作正常：

<p style="width:100px; word-wrap: break-word !important;">loooooooooong_word</p>

Fiddle

【问题讨论】：

能发一些相关的html代码吗？
你能把你的代码放在小提琴里吗？
自动换行，你需要把这个词打破对吗？？
是的，我不能使用分词：break-all;如果你是这个意思。

标签： css word-wrap

【解决方案1】：

尝试设置width:inherit或width:100%

【讨论】：

谢谢，但我都试过了，结果一样:(

【解决方案2】：

为了让 div 中的文本换行，您必须为该 div 指定 white-space CSS 属性。

将其设置为 pre-wrap 或 normal。

例如。 Text Wrap

如果您希望文本在报纸栏目中显示，您也可以指定text-align:justify 属性。

例如。 Justify

【讨论】：

感谢您的帮助，我尝试了正常、初始、预换行和预行的空白，但没有任何反应。
为什么不以百分比指定宽度，或者可能是最大宽度和最小宽度而不是宽度，这将使 div 可调整大小并且当 div 变得太小时单词会中断。

【解决方案3】：

<p>loooooooooooong_word</p>


<p style="word-wrap: break-word !important;">loooooooooong_word</p>

<p style="width: 100px; word-wrap: break-word !important;">loooooooooong_word</p>

Fiddle

尝试调整浏览器大小，自动换行效果很好...！！你可以找到<p> tad 没有和有 sytle 和有固定像素之间的区别

为了更清楚，计算机是愚蠢的，如果你想打断一个单词，你应该指定单词应该被打断的条件。没有给出你期望输出的条件？

【讨论】：

是的，在 Fiddle 中工作正常；但不在我的应用程序中。事实上，当我调整浏览器大小时，我的 looooooooooong_word 就消失了！
你能告诉我们你在哪里包装了代码，所以错误可能在其他 css..
你是对的，现在我正在尝试使用其他 CSS 类中的代码并且它可以工作......问题是我使用的是其他人制作的模板。但我不明白为什么 !important 什么都不做。
很高兴你找到它..!!干杯..！！ :)

【解决方案4】：

您可以尝试使用overflow-wrap 属性来破解单词。

此外，您可以通过将min-width/min-height 应用于父容器来设置调整大小的限制。

使用你的例子，这就是我的意思：

<div style="resize: both; overflow: hidden; min-height: 100px; min-width: 100px; border: 2px dashed black; padding: 5px;">

  <p style="overflow-wrap: break-word;">loooooooooooong_word</p>
  <p style="overflow-wrap: break-word;">loooooooooooong_word</p>

</div>

【讨论】：