文本不包装在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 }
(注意浏览器支持)。
或者,您可以使用 overflow
以截断文本,如果它不适合在容器中。
Alternatively, you can use overflow
to truncate the text if it won't fit in the container.
这篇关于文本不包装在p标签中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!