Javascript 溢出隐藏元'；t文本换行_Javascript_Html_Css

Javascript 溢出隐藏元'；t文本换行

javascript html css

Javascript 溢出隐藏元'；t文本换行,javascript,html,css,Javascript,Html,Css,我有一个向左浮动的图像和一个具有以下要求的div： a）需要最大高度 b）需要溢出：隐藏。 c）它的文本需要环绕浮动图像，就像在任何普通浮动中一样但是我对（C）有一个问题，文本没有包装。我读过溢出：隐藏实际上阻止了文本包装有人知道这方面的解决方案吗（最好是css）如您所见，文本没有环绕cat图像： <html> <style> #articleContainer { width: 500px; height: 800px;

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

但是我对（C）有一个问题，文本没有包装。我读过溢出：隐藏实际上阻止了文本包装

有人知道这方面的解决方案吗（最好是css）

如您所见，文本没有环绕cat图像：

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

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

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


#物品容器{
宽度：500px；
高度：800px；
颜色：粉红色；
}
.照片{
浮动：左；
宽度：150px；
高度：150像素；
}
.文章{
最大高度：300px；
最大宽度：200px；
溢出：隐藏；
}
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
诸如此类

将图像放入文章div中


布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

无需更新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>


废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话
废话废话废话废话废话废话
废话废话
废话废话
废话废话
废话废话

演示：

HTML

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

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

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

试试css{空白：行前；}