阻止文本包装在锚点内的图标下

Question

我正在尝试创建一个由图标表示的链接(我使用字体很棒的图标)和一些文本.如果文本换行到下一行,我希望它与文本一致,而不是出现在图标下面.

我已经尝试了一个我在这个答案中找到的解决方案,它似乎对我很好

<a>
    <i class="fa fa-exclamation-circle"></i>
    <p>Text of the link</p>
</a>


    i {
       float: left;
    }
    p {
       overflow: hidden;
    }

但是,在Eclipse中我代表这个(在JSP页面中)它会抛出一个警告("标记的无效位置p"),我不能在一个锚点内有一个段落标记(我收集允许这是一个HTML5标准) .

使用span而p不是似乎没有工作.

有谁知道怎么做到这一点span？或者知道更好的方法吗？

我需要支持IE8 +,所以我认为任何flexbox的东西都不会起作用.

要明确我想这样:

*FA-icon*   Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed.

而不是这个:

*FA-icon*   Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt

Answer 1

从我的评论:

警告是关于<p>并<i>肩并肩,将p转换为跨度并添加display:block到跨度(旁边overflow):)

.fa {
  float:left;
  padding:0 2em;
  }
a span {
  display:block;
  overflow:hidden;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
  <i class="fa fa-exclamation-circle"> </i>
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</a>