文本不包装在p标签中 [英] Text not wrapping in p tag

问题描述

我有两个浮动的div，并排，有p个标签。 p标签中的文本不会换行并且只是溢出容器，您可以在图像下方的文本中看到：

I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:

我的HTML看起来像这样：

My HTML looks like so:

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

有没有人经历过这个？我没有！

Has anyone experienced this before? I haven't!! Driving me mad!

推荐答案

只有在出现断句时才会发生换行。

Word wrapping only occurs when there is a word break.

如果你有一个word就是那么长，那么就没有地方可以破解了。

If you have a "word" that is as long as that, then there is no place for it to break.

正确的解决方法是写真实内容，而不是无意义的字符串。如果您使用的是用户生成的内容，那么请添加一个非常长的单词，并禁止它们（或删除其中一部分的URL，而保持整个事情在一个链接）。

The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).

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

Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.

p { word-break: break-all }

（注意

(Note browser support).

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

Alternatively, you can use overflow to truncate the text if it won't fit in the container.

这篇关于文本不包装在p标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！