Question

我正在尝试创建一个由图标表示的链接（我使用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页面中）它会抛出一个警告（“标记p的无效位置”），我不能在一个锚点内有一个段落标记（I收集允许这是一个HTML5标准。）

使用span代替p似乎不起作用。

有人知道如何使用span完成此操作吗？或者知道更好的方法吗？

我需要支持IE8 +，所以我不会认为任何弹性箱的东西都能正常工作。

要清楚我想这样：

*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）：）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

尝试将图标设置在绝对位置，并在链接中添加填充（使用图标的宽度和图标与文本之间的边距）。例如，如果您的图标宽度为15px，并且您希望图标和文本之间有5px的边距，请执行以下操作：

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

Answer 4

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

＆＃13;

p{display: inline;}

＆＃13;

<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>

＆＃13;

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

4 个答案: