1

I am creating a flag-like div with text inside and a triangle created by css on the right side. This flag should be as wide as the text takes. The problem is that some of them have two lines of text in them and the <p> element will take the whole width after the line breaks instead of just the space the text is taking. So to put it graphically here are two images (sorry about quality and because low reputation still, I can't put images directly into the post.):

https://i.stack.imgur.com/e2xep.png

The red square is what I need removed.

https://i.stack.imgur.com/m2YGv.png

This would be the desired outcome.

Note that the green background is applied to the <p> element here.

My HTML structure is just a <div> element with a <p> element inside. I'm not putting the triangle divs yet so I don't cause more problems than the ones I already have...

The code for the divs shown in the images would be 

<div class="container">
    <p>Flag not to going to be ok here beeeeeeeeecause spaces</p>
</div>
<div class="container">
    <p>Flag is ok here</p>
</div>
<div class="container">
    <p>Flag is ok here too because one line</p>
</div>

I'm using word-wrap: break-word in my css.

So is there any way to make that <p> width ajust to the text when line breaks?

If not, how should I approach this problem? I don't have enough experience with css so I don't really know how should I proceed with this.

iZamudio
  • 11
  • 4
  • 1
    include your css code pls – xmaster Jun 19 '19 at 08:43
  • Thank you for trying to answer my question @xmaster. Unfortunately for me what I'm trying is not possible as I've read in the question asked before mine, which seems to be a duplicate (I could not find that other question before). To put it simple: p elements are blocks and won't do for what I need. I will try changing to span elements. – iZamudio Jun 19 '19 at 10:21

0 Answers0