我有两个并排的浮动 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 许可协议
仅当出现分词时才会出现换行。
如果你有一个这么长的“词”,那么它就没有地方可以断了。
正确的解决办法是写真实的内容,而不是写无意义的字符串。如果您使用的是用户生成的内容,则添加对超长单词的检查并禁止使用它们(或者为 URL 删除其中的一部分,同时将整个内容保留在链接中)。
或者,您可以使用
word-break
CSS 属性 告诉浏览器在单词中间换行。(注意 浏览器支持)。
或者,如果文本不适合容器,您可以使用
overflow
截断文本。