Stop text from wrapping under an icon inside an anchor

问题

I'm trying to create a link that is represented by an icon (I'm using font-awesome for icons) and some text. If the text wraps down to the next line I want it in line with the text, rather than appearing under the icon.

I've tried a solution I found in this answer and it seems to work fine for me

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


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

However, in Eclipse where I'm representing this (in a JSP page) it throws a warning ("invalid location of tag p") that I can't have a paragraph tag inside an anchor (I gather allowing that is an HTML5 standard).

Using span instead of p doesn't seem to work.

Does anyone know how to accomplish this with a span? Or know of a better way to do this?

I need to support IE8+, so I don't think any flexbox stuff would work.

To be clear I would like this:

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

Instead of this:

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

回答1:

From my comment:

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>

回答2:

you can float the i then apply padding-left to span (changed from 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>

回答3:

Try setting your icon in absolute position and adding padding-left to your link (with the width of your icon and the margin you want between your icon and your text). For example, if you icon is 15px wide and you want 5px margin between your icon and your text, do this :

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

回答4:

try with this below code it may help you.

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>

来源：https://stackoverflow.com/questions/36043002/stop-text-from-wrapping-under-an-icon-inside-an-anchor

标签

html

css

font-awesome