溢出隐藏不会文本换行

Overflow Hidden Won't Text Wrap

本文关键字：文本 换行 隐藏 溢出      更新时间：2023-09-26

>我有一个向左浮动的图像和一个具有以下要求的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>

没有更新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/

将图像放在文章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>

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;
}

try css{ white-space： pre-line; }

相关文章：