129

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

在此处输入图像描述

在此处输入图像描述

4

10 回答 10

227

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

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

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

于 2012-08-30T12:42:16.557 回答
126

利用

white-space: pre-line;

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

于 2014-12-30T05:55:09.480 回答
34

您应该使用overflow:hidden;scroll

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

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

于 2012-08-30T12:32:31.903 回答
15

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

overflow-wrap: break-word;

根据规范(来源CSS | MDN):

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

将值设置为break-word

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

值得一提...

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


如果您关心旧版浏览器的支持,则值得同时指定:

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

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

于 2018-01-14T21:13:21.640 回答
7

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

于 2012-08-30T12:47:56.757 回答
6

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

white-space: pre-wrap;
于 2018-04-06T18:00:37.093 回答
5

这对我有用:

{word-break: break-all; }

于 2019-12-20T09:57:34.460 回答
5

这个技巧对我有用:

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

空格
分词

于 2021-04-04T10:39:13.397 回答
2

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

于 2016-03-30T14:29:37.043 回答
-6

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

于 2014-01-27T00:12:50.153 回答