停止文本在锚点内的图标下换行

Question

我正在尝试创建一个 link，它由一个图标（我使用 font-awesome 作为图标）和一些文本表示。如果文本换行到下一行，我希望它与文本对齐，而不是出现在图标下方。

我已经尝试了在此 answer 中找到的解决方案，它似乎对我来说效果很好

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


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

但是，在我表示此内容的 Eclipse 中（在 JSP 页面中）它会发出警告 ("invalid location of tag 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

尝试将您的图标设置为绝对位置并向您的 link 添加 padding-left（使用您的图标的宽度以及您想要的图标和文本之间的边距）。例如，如果您的图标是 15px 宽并且您希望图标和文本之间有 5px 的边距，请执行以下操作：

a {
    position: relative;
    padding-left: 20px;
}
i {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

您可以 float i 然后将 padding-left 应用到 span（从 p 更改）

a {
  display: block;
  border: red solid
}
i {
  float: left
}
span {
  padding-left: 20px;
  display:block; /* to make span a block element */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<a>
  <i class="fa fa-exclamation-circle"></i>
  <span>Text of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the link</span>
</a>

Answer 3

尝试使用以下代码，它可能对您有所帮助。

p{display: inline;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<a>
  <i class="fa fa-exclamation-circle"> </i>
  <p>Text of the link</p>
</a>

Answer 4

来自我的评论：

the warning is about <p> and <i> side by side, turn p into a span and add display:block to the span (aside 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>

停止文本在锚点内的图标下换行

Stop text from wrapping under an icon inside an anchor

html

css

font-awesome