我正在创建一个带有国旗的div，其中包含文本，右侧是css创建的三角形。此标志应与文本一样宽。问题在于其中一些包含两行文本，并且<p>元素将在换行后占据整个宽度，而不仅仅是文本占用的空间。
因此，以图形方式将其显示为两张图片（对不起质量，并且由于信誉仍然很差，我无法将图片直接放入帖子中。）：
我需要删除红色方块。
这将是理想的结果。
请注意，此处的<p>元素采用了绿色背景。
我的HTML结构只是一个<div>元素，其中包含一个<p>元素。我还没有放置三角形div，所以不会引起比我已经遇到的更多的问题...
图片中显示的div的代码为
<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>
我在CSS中使用word-wrap: break-word。
因此，有什么方法可以使<p>的宽度在换行时与文本一致吗？
如果没有，我应该如何解决这个问题？我对CSS没有足够的经验，所以我真的不知道该如何进行。