文本没有包装在p标签中

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

有谁之前经历过这个吗？我没有!! 让我生气!

Answer 1

将此样式赋予<p>标记.

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

Answer 2

只有在单词分隔时才会进行自动换行.

如果你有一个与之相关的"单词",那么它就没有地方可以打破.

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

或者,您可以使用word-breakCSS属性告诉浏览器在单词中间换行.

p { word-break: break-all }

(注意浏览器支持).

或者,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