How to make an image divide the text from within a bounded width div?

Asked

Viewed 1,405 times

5

How to make a <img> break the text from within a <div> 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>

got that result:
resultado
where words fill the horizontal space left by <img>.

What I’m trying to do is, that a <img> of the same width as #container, fit in the middle of the second and third lines, causing the text to split. I wanted this code: 

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

produce that result:
esperado

I wanted the image to come exactly after the second line. This text comes from a field in the database, it comes like this, whole. Wanted an alternative that didn’t need the programming language to break the text into parts.

html css

  • Separating the text by placing one part before the img and the other part after does not solve your problem?

  • @haykou Yes, but then would have to depend on some programming language, and wanted an alternative that did not depend on programming language.

  • @haykou It would be almost like a float vertical.

  • i say only let <div id="container"> "Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Quisque molestie justo et", then the image tag and below it the rest of the text "hendrerit molestie."

  • I’m taking the text "Lorem ipsum" from the database and putting it into a variable. To do it this way, you would have to divide the content of this variable into 2, to display the first part, then display the image and then the second part of the divided text. I was wondering if there are any alternatives in css/html so I don’t have to divide the text through my programming language.

  • I get it, put it from the bank to the question that I think will make it easier for someone to help you

  • Really with HTML and CSS gone you won’t be able to do it that way. You really need the image to be inside the string. Why not save the image inside the string in the database?

  • Because at the time of saving I would have to calculate where I would break the second line of text being saved. It’s exactly the problem I’m trying to avoid when displaying content.

  • 1

    To with @Erloncharles on this. I’m trying to do here but I think with pure CSS will not happen.

  • I believe that there is no trivial solution that is flexible enough. Ideally it would be to split the text beforehand and define two separate paragraphs. Some examples of solutions to similar problems can be found: https://css-tricks.com/float-center/ http://alistapart.com/article/crosscolumn But note that they address layouts with the image between two columns.

  • Yes, with pure CSS not rolled, I ended up resorting to language. Interesting is that the @Fuadsaud answer is almost the solution to the question. Maybe with a few adjustments...

Show 6 more comments

2 answers

1

It is necessary to apply the attribute shape-outside: border-box; in the image so that the text is fluid around the image.

For exact two lines to be set above the image, it is necessary to define the margin-top of the image twice the value of the line-height of the text.

#container {
  width: 250px;
  background: #ccc;
}

#txt {
  display: block;
  line-height: 1em;
}

#imagem {
  float: left;
  shape-outside: border-box;
  margin-top: 2em;
}
 <div id="container">
    <span id="txt">
    <img id="imagem"
        src="https://i.dlpng.com/static/png/7046847_preview.png"
        width="250" />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Quisque molestie justo et hendrerit molestie.
    </span>
</div>

-1

My solution would be this for your problem, but you would have to give the spaces inside the html, so I don’t know if it would work in your case, this is like 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>

  • But then it implies that I know where the second line will break, because I have to add the spaces right after it. The text can be any one, with any variation in the number of characters. I wanted css to take care of it, as it takes care of breaking words into a bounded width div.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.