Question

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

它完美地工作，但只有当我指定宽度时（如果这个值为auto，则自动换行不起作用）。

问题是我希望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

Answer 1

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

Answer 2

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

将其设置为预包装或正常。

例如。 Text Wrap

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

例如。 Justify

Answer 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和固定像素的差异

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

Answer 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>

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

4 个答案: