文本未换行在段落元素中

Question

我有两个并排的浮动 div，里面有 p 标签。 p 标签中的文本没有换行，只是溢出容器，正如您在图像下方的文本中看到的那样：

我的 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;
}

有谁之前经历过这个吗？我没有！！快把我逼疯了！

原文由 Jon Hudson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅当出现分词时才会出现换行。

如果你有一个这么长的“词”，那么它就没有地方可以断了。

正确的解决办法是写真实的内容，而不是写无意义的字符串。如果您使用的是用户生成的内容，则添加对超长单词的检查并禁止使用它们（或者为 URL 删除其中的一部分，同时将整个内容保留在链接中）。

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

 p { word-break: break-all }

（注意 浏览器支持）。

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

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将此样式赋予 <p> 标签。

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

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议