文本流出div

Question

当文字没有空格且超过div尺寸200px 时，它会流出来 宽度定义为200px 我已将代码放在http://jsfiddle.net/madhu131313/UJ6zG/ 你可以看到下面的图片 已修改：我希望文字转到下一行

Answer 1

这是因为你有一个没有空格的长词。您可以使用自动换行属性来使文本中断：

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

它也有相当不错的浏览器支持。 See documentation about it here

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

  

为了防止溢出，如果行中没有其他可接受的断点，通常不可破坏的单词可能会在任意点被破坏。

值得一提......

  

该属性最初是一个名为word-wrap的非标准且没有前缀的Microsoft扩展，并且由大多数具有相同名称的浏览器实现。它已被重命名为overflow-wrap，其中word-wrap是别名。

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

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

实施例。 IE9 无法识别overflow-wrap，但可以使用word-wrap

Answer 5

使用overflow:auto它会在div :)中为您的文字添加滚动条。

Answer 6

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

white-space: pre-wrap;

Answer 7

我最近遇到过这个。我用过：display:block;

Answer 8

这个技巧对我有用：

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

white-space
word-break

Answer 9

这对我有用：

{word-break: break-all; }

Answer 10

如果只是一个需要包裹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/