gpt4 book ai didi

javascript - 溢出隐藏不会文字换行

转载 作者:行者123 更新时间:2023-11-28 12:16:16 24 4
gpt4 key购买 nike

我有一个向左浮动的图像和一个具有以下要求的 div:a) 需要最大高度b) 需要溢出:隐藏。c)它的文字需要环绕 float 图像,就像在任何普通 float 中一样。

但是我在使用 (C) 时遇到了问题,文本没有换行。我读过 overflow:hidden 实际上会阻止文本换行。

有没有人知道任何解决方案(最好是 css)?

如您所见,文本没有环绕在猫的图像周围:<强> http://jsfiddle.net/FWjG4/

<html>
<style>
#articleContainer {
width: 500px;
height: 800px;
color: pink;
}

.photo {
float: left;
width: 150px;
height: 150px;
}

.article {
max-height: 300px;
max-width: 200px;
overflow: hidden;
}

</style>
<body>
<div id="articleContainer">
<img class="photo" src="googleyosemite.jpg" />
<div class="article" >blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah bla
</div>

</div>
</body>

</html>

最佳答案

CSS 没有更新,只需将图像放在 div 中即可。

   <div id="articleContainer">

<div class="article" ><img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9gFNtL3J-Qz7phuIK4F98X3UcRqAhihW4bdF70Ka07MzF-3yfjQ" />blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blahblah blah blahblah
blah blah blah
blah blah blah
blah blah blah
blah blah blah




</div>

</div>

演示:http://jsfiddle.net/shekhardesigner/dKjwz/

关于javascript - 溢出隐藏不会文字换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19153129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com