CSS icon using :before keep text from wrapping under

Question

I have an icon placed using :before and the text following it sometimes wraps to two or three lines. When it wraps the text goes under the icon.

I am l

Answer 1

simple solution is making your text inside a paragraph (or assign it your own class what you prefer) and then you can use this.

p{

 overflow: hidden;

}

This is what stops the text wrapping under the image.

What is happening is that when you set a specific height or width on a box and the content inside it cannot fit you have to specify how that will be handled. That is where the css overflow property comes in.

Answer 2

The only way with the current html would be to give padding to the a elements and absolute position the icon to the left.

a.form-title[href $='.pdf']:before, 
a.form-title[href $='.PDF']:before, 
a.form-title[href $='.pdf#']:before, 
a.form-title[href $='.PDF#']:before, 
a.form-title[href $='.pdf?']:before, 
a.form-title[href $='.PDF?']:before{
    position:absolute;
    left:0;
}
a.form-title[href $='.pdf'], 
a.form-title[href $='.PDF'], 
a.form-title[href $='.pdf#'], 
a.form-title[href $='.PDF#'], 
a.form-title[href $='.pdf?'], 
a.form-title[href $='.PDF?']{
  position:relative;
  display:inline-block;
  padding-left:35px;
  }

Demo at https://jsfiddle.net/x0yyfxmm/3/

Answer 3

• Float left the asset
• Overflow hidden the text element

a[href $='.pdf']:before /*etc...*/ {
  content: "\f1c1";
  font-family: 'FontAwesome';
  color: #999;
  margin: 0px 10px 0 0;
  font-size: 24px;
  float: left;
}
.form-title span {              /* WRAP TEXT IN SPAN */
  display: block;
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div style="width:220px/*DEMOONLY*/;">
  <a href="/xxx.pdf" class="form-title">
    <span>xxxxx - CO Private Passenger Auto Insurance (Summary Disclosure Notice)</span>
  </a>
</div>

Answer 4

Your :before pseudo-elements are floated, so what you're seeing is the natural wrapping of text around a floated element. To prevent that wrapping, you'll need to change the way you're positioning your pseudo-elements.

Since your icon has a fixed height and width that you know, why not add padding to your anchor tags and absolutely position the icon? That way, the padding will prevent the text from wrapping and your icon will sit right where you want it to.

a[href $='.pdf'], a[href $='.PDF'], a[href $='.pdf#'], 
a[href $='.PDF#'], a[href $='.pdf?'], a[href $='.PDF?'] {
    display: inline-block;
    padding-left: 30px; /* 20px icon width + 10px margin */
    position: relative;
}

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, 
a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before {
    content: "\f1c1";
    font-family: 'FontAwesome';
    color: #999;
    font-size: 24px;
    vertical-align: middle;
}

.form-title:before {
    left: 0;
    position: absolute;
    top: 0;
}

And, here's your updated Fiddle showing that code in action.