Question

如果文字很长，则文字移动到图像后的下一行。如何在图像周围包装文字？

CSS：

img {
    float: left;
    width: 200px;
    height: 200px;
}
.description {
    border: 1px solid #000;
    display: inline;
}

http://jsfiddle.net/qw4fxdwb/

提前致谢。

Answer 1

你可以这样做demo：

.wrapper-text{
    word-wrap: break-word; /*fixes the text to go below*/
    overflow: auto; /*fixes the whole text preventing to go below the image*/
}

Answer 2

如果这是你想要的话，请使用它

.wrapper-text {word-wrap:break-word;}

Fiddle

Answer 3

这是由浮动元素完成的。请参阅fiddle

CSS：

.wrapper img 
{
   float:left;
    margin-right:10px;
}

HTML：

<div class="wrapper"> 
    <img src="http://placehold.it/200x200" alt="placeholder">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 </div>

</div>

如何围绕长文本包装图像？

3 个答案: