Question

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

但是我遇到（C）问题，文字没有包装。我已经读过溢出：隐藏实际上阻止了文本的包装。

有人知道任何解决方案（最好是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>

Answer 1

将图片放入文章div。

http://jsfiddle.net/FWjG4/3/

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

Answer 2

没有关于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/

Answer 3

JS Fiddle

<强> HTML

<body>
    <div id="articleContainer">
        <img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9gFNtL3J-Qz7phuIK4F98X3UcRqAhihW4bdF70Ka07MzF-3yfjQ" />
        <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 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>
</body>

<强> CSS

#articleContainer {
     width: 200px; /* width is reduced*/
     height: 800px;
     color: pink;
}

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

.article {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 4

尝试css {white-space：pre-line; }

溢出隐藏不会文字换行

4 个答案: