How to make an image split text from within a limited width div?

Question

How to make an image split text from within a limited width div?

Navigation

#1 by (0 votes)

5

How can I make a <img> break text from within a limited% width%?

For example, with this code:

<style>
    #imagem {
        float:left;
    }

    #container {
        width:250px;
        background:#ccc;
    }
</style>

<div id="container">
    <img id="imagem" src="stack.png" width="150" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque molestie justo et hendrerit molestie.
</div>

I have this result:
wherewordsfillthehorizontalspaceleftby<div>.

WhatIamtryingtodoistohavea%ofthesamewidthas<img>fitinthemiddleofthe2ndand3rdline,causingthetexttodivide.Iwantedthiscode:

<divid="container">
    <img id="imagem" src="stack.png" width="250" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Quisque molestie justo et hendrerit molestie.
</div>

would produce this result:

I wanted the image to come right after the second line. This text comes from a field in the database, so it comes, whole. I wanted an alternative that did not need the programming language to break the text into parts.

html css

asked by anonymous 27.11.2014 / 19:52

1 answer

Add Array from multiple fields How can I make a certain class appear "..." after reaching a character limit

score 0 · Answer 1

My solution would be this for your problem, but you would have to give the spaces inside the html, so I do not know if it would work in your case, this is kind of a "gambiarra"

*{
  box-sizing:border-box;
}
#imagem {
    position:absolute;
    top:70px;
  height:100px;
  border:1px solid red;
    }

    #container {
        width:250px;
        background:#ccc;
    }
p{
  white-space:pre;
  word-wrap:break-word;
}

<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie justo et 
    
  
  
  

  
hendrerit molestie.</p>
    <img id="imagem" src="stack.png" width="250" />
    
</div>