我正在尝试创建一个由图标表示的链接（我正在使用字体很棒 /questions/tagged/font-awesome用于图标）和一些文本。如果文本换行到下一行，我希望它与文本对齐，而不是出现在图标下方。
我尝试过在此找到的解决方案answer https://stackoverflow.com/a/15421257/324672它似乎对我来说效果很好
<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 标准）。
Using span代替p似乎不起作用。
有谁知道如何通过span？或者知道更好的方法来做到这一点？
我需要支持 IE8+，所以我不支持think任何弹性盒的东西都可以。
需要明确的是
我想要这个：
*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
从我的评论来看：
警告是关于<p> and <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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
