Question

我有两个浮动的div，并排，里面有p标签。 p标签中的文本不会换行，只会溢出容器，如图中的文字所示：

Example:

我的HTML看起来像这样：

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

我的CSS：

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

以前有没有人经历过这个？我没有!!让我生气！

Answer 1

将此样式添加到<p>标记。

p {
    word-break: break-all;
    white-space: normal;
}

Answer 2

仅在有分词时才会进行自动换行。

如果你有一个与之相关的“单词”，那么它就没有地方可以打破。

正确的解决方案是编写真实内容而不是无意义的字符串。如果您正在使用用户生成的内容，那么请为特别长的单词添加一个检查并禁止它们（或者为URL保留部分内容，同时将整个内容保留在链接中）。

或者，您可以使用word-break CSS property告诉浏览器在单词中间换行。

p { word-break: break-all }

（注意browser support）。

或者，如果文本不适合容器，您可以使用overflow截断文本。

Answer 3

对于仍在努力的人，请务必检查并查看您是否在相关字体上设置了行高值：它可能会覆盖自动换行。

Answer 4

那是因为你有连续的文字，意味着没有空格的单个长词。要打破它，请添加word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; word-break: break-all; background:red
}

<强> DEMO

Answer 5

这不是问题的答案，但是当我在寻找我遇到的问题的答案时找到了这个页面，我想提一下我发现的解决方案，因为它花了我很多时间。希望这对其他人有用：

问题在于＆lt; p＆gt;中的文字。标签不会在div中折叠。最后，我打开了检查员，发现所有单词之间都有一个“没有空洞的实体”。我的编辑器vi只是显示正常的空格（一些看不见的chr，我不知道是什么），但我复制了从PDF文档粘贴文本。解决方案是从vi中复制一个空格并用空格替换它。即。：％s / / / g，其中要替换的空白是从违规文本中复制的。问题解决了。

Answer 6

如果字符不适合容器中的某行，则可以使用自动换行来破坏单词或连续字符串。

word-wrap: break-word;

这将在适当的断点处保持断线，除非单个字符串不适合一条线，在这种情况下它会断开。

JSFiddle

Answer 7

这个问题有点晚了，但其他人可能会受益。我遇到了类似的问题，但是对文本的正确添加要求适用于所有设备尺寸。因此，在我看来，这是可行的。需要设置观察端口。

 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }

Answer 8

EASY

p{
    word-wrap: break-word;
}

Answer 9

对于其他在这里找到自己的人来说，我要找的CSS是

overflow-wrap: break-word;

仅在需要时才打断单词（单个单词的长度大于p的宽度），而word-break: break-all可以打断每一行的最后一个单词。

overflow-wrap demo

Answer 10

在有问题的p元素中添加width: 100%;可以解决我的问题。我不知道为什么会这样。

Answer 11

实际上是解决方案

p{
    white-space:normal;
}

您可以通过修改分词属性更改分行行为

p{
    word-break: break-all; // will break at end of line 
}

break-all：将在最后将字符串断开，在最后一个单词处断开 word-break：更多的是制动，例如在会很好地断裂吗？点正常：与断字相同

Answer 12

将float：left属性添加到图像中。

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}

文本没有包装在p标签中

12 个答案: