强制图像与文本保持同一行

Question

我目前正在使用Joomla网站，并在标题中有一个自定义HTML块，用于显示电话号码和电子邮件，旁边有图标。

这样可以正常工作，但是当您调整页面大小并使其缩小时，图像将移动到另一条看起来很糟糕的线，

<p style="float: right;"><img src="/images/email_envelope.png"> email@email.com</p>

这就是我正在使用的。

我也尝试过使用display：inline-block，但同样的问题也会发生。

我有上面的另一个，有一个较小的文本字符串，但相同的代码，它可以正常工作。

有人有任何建议吗？

Answer 1

我认为你需要white-space CSS属性。

  

white-space属性控制文本在元素上的处理方式   它适用于。

     

https://css-tricks.com/almanac/properties/w/whitespace/

MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

你可以让它不包裹这样做，但我不喜欢这种方法，因为它可能会导致滚动或只是不显示所有内容。

<p style="float: right; white-space: nowrap;"><img src="/images/email_envelope.png"> email@email.com</p>

当窗口缩小到certian宽度以下时，您也可以隐藏图像：在此示例中为600px：

@media (max-width: 600px) {
  #emailImg{
    display:none;
  }
}

<p style="float: right;"><img id="emailImg" src="/images/email_envelope.png"> email@email.com</p>