0

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

但是我遇到了 (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>
4

4 回答 4

0

JS小提琴

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;
}
于 2013-10-03T07:32:16.277 回答
0

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

于 2013-10-03T13:38:00.997 回答
0

将图像放在文章 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>
于 2013-10-03T07:25:40.893 回答
0

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/

于 2013-10-03T07:28:37.247 回答