从 div 流出的文本

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

enter image description here

enter image description here

344583 次浏览
小开

你应该使用 overflow:hidden;或者 scroll

Http://jsfiddle.net/uj6zg/1/

或者你可以用 php 来缩短长词..。

小开
最佳答案

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

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

它也有相当好的浏览器支持。

小开

使用 overflow:auto，它会给你的文本一个滚动条内的 div:)。

小开

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

小开

使用

white-space: pre-line;

它将防止文本流出 div。它将打破文本，因为它达到的结束 div。

小开

我最近遇到了这个问题，我使用了: display:block;

小开

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

overflow-wrap: break-word;

根据说明书(资料来源 CSS | MDN) :

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

值设置为 break-word

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

值得一提的是..。

该属性最初是一个名为 word-wrap的非标准和无前缀的 Microsoft 扩展，大多数具有相同名称的浏览器都实现了该属性。它后来被重命名为 overflow-wrap，word-wrap是一个别名。

如果您关心遗留浏览器的支持，那么值得同时指定两者:

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

IE9不识别 overflow-wrap，但与 word-wrap工作得很好

小开

如果有帮助的话，可以在选择器中添加以下有价值的属性:

white-space: pre-wrap;
小开

这对我有效:

{word-break: break-all; }

小开

这招对我很管用:

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

空白区域
休息一下


提交答案