文本从div中流出

Question

当文本没有空格并且超过div大小200px时它就会流出 宽度定义为200px 我已将代码放在这里http://jsfiddle.net/madhu131313/UJ6zG/ 你可以看下面的图片 编辑：我希望文本转到下一行

Answer 1

这是因为你有一个很长的单词，没有空格。您可以使用

word-wrap

属性来导致文本中断：

#w74 { word-wrap: break-word; }

它也有相当好的浏览器支持。 请参阅此处的相关文档。

Answer 2

使用

white-space: pre-line;

它将防止文本流出

div

。当文本到达

div

的末尾时，它会破坏文本。

Answer 3

您应该使用

overflow:hidden;

或

scroll

http://jsfiddle.net/UJ6zG/1/

或者使用 php 你可以缩短长单词......

Answer 4

您需要将以下 CSS 属性应用到容器块 (div)：

overflow-wrap: break-word;

根据规范（来源CSS | MDN）：

overflow-wrap

CSS 属性指定浏览器是否应在单词中插入换行符以防止文本溢出其内容框。

将值设置为

break-word

为了防止溢出，如果行中没有其他可接受的断点，则通常不可断的单词可以在任意点处断。

值得一提...

该属性最初是一个非标准且无前缀的 Microsoft 扩展，称为

word-wrap

，并由大多数同名浏览器实现。此后它已重命名为

overflow-wrap

，其中

word-wrap

是别名。

---

如果您关心旧版浏览器支持，则值得指定两者：

word-wrap    : break-word;
overflow-wrap: break-word;

例如。 IE9 无法识别

overflow-wrap

但可以与

word-wrap

配合使用

Answer 5

这对我有用：

{word-break: break-all; }

Answer 6

这个技巧对我有用：

{
  word-break: break-all;
  white-space: pre-wrap;
}

空白
断字

Answer 7

使用

overflow:auto

它将为您的文本提供滚动条

div

:)。

Answer 8

如果这有帮助的话。将以下具有值的属性添加到您的选择器中：

white-space: pre-wrap;

Answer 9

我最近遇到了这个。我用过：

display:block;

Answer 10

要使用

Tailwind

解决此问题，您也可以使用此

<p class="break-words ...">...</p>

您可以在这里阅读更多内容：https://tailwindcss.com/docs/word-break

Answer 11

这个组合对我来说很有效。

 <asp:Label ID="User" style="white-space:pre-line; word-wrap: break-word" Text="" runat="server" />

在 ASP.Net 中。

Answer 12

如果只是一个需要包裹 2 或 3 行的实例，我只会在字符串中使用一些

<wbr>

。它会像

<br>

一样对待它们，但如果没有必要，它不会插入换行符。

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

这是一把小提琴。

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/