CSS 文本流出div

text flowing out of div

提问by madhu131313

When the text is without spacesand more than the div size 200pxit's flowing out The width is defined as 200px I have put my code here http://jsfiddle.net/madhu131313/UJ6zG/You can see the below pictures edited: I want the the text to go to the next line

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

回答by chipcullen

It's due to the fact that you have one long word without spaces. You can use the word-wrapproperty to cause the text to break:

这是因为你有一个没有空格的长词。您可以使用该word-wrap属性使文本中断：

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

It has fairly good browser support, too. See documentation about it here.

它也有相当好的浏览器支持。在此处查看有关它的文档。

回答by Nixon

Use

用

white-space: pre-line;

It will prevent text from flowing out of the div. It will break the text as it reaches the end of the div.

它将防止文本流出div. 它会在文本到达div.

回答by madhu131313

You should use overflow:hidden;or scroll

你应该使用overflow:hidden;或scroll

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

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

or with php you could short the long words...

或者用 php 你可以缩短长的话......

回答by Paolo

You need to apply the following CSS property to the container block (div):

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

overflow-wrap: break-word;

According to the specifications (source CSS | MDN):

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

The overflow-wrapCSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

该overflow-wrapCSS属性指定是否在浏览器应该字中插入换行符，以防止文本溢出其内容框。

With the value set to break-word

将值设置为 break-word

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

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

Worth mentioning...

值得一提...

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrapbeing an alias.

该属性最初是一个名为 的非标准和无前缀的 Microsoft 扩展word-wrap，并由大多数同名浏览器实现。它已被重命名为overflow-wrap，word-wrap作为别名。

---

---

If you care about legacy browsers support it's worth specifying both:

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

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

Ex. IE9does not recognize overflow-wrapbut works fine with word-wrap

前任。IE9无法识别overflow-wrap但可以正常使用word-wrap

回答by Rahul Razdan

use overflow:autoit will give a scroller to your text within the div:).

使用overflow:auto它会在div:) 中为您的文本提供滚动条。

回答by Martin Lloyd Jose

If this helps. Add the following property with value to your selector:

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

white-space: pre-wrap;

回答by addo

This did the trick for me:

这对我有用：

{word-break: break-all; }

{word-break: break-all; }

回答by arn-arn

i recently encountered this. I used: display:block;

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

回答by gaby de wilde

If it is just one instance that needs to be wrapped over 2 or 3 lines I would just use a few <wbr>in the string. It will treat those just like <br>but it wont insert the line break if it isn't necessary.

如果只有一个实例需要用 2 或 3 行包装，我只会<wbr>在字符串中使用一些。它会像对待那些一样，<br>但如果没有必要，它不会插入换行符。

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

Here is a fiddle.

这是一个小提琴。

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

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