CSS Icon Using :Before Keep Text from Wrapping Under

CSS icon using :before keep text from wrapping under

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

Prevent text from wrapping under icon

You have to float: left the div after the p tag. What is currently hapening is how a floating element is expected to behave with simple text surrounding it. Just like images in newspaper are floated to left and right and the text goes sideways to the images and then passes below the image when the runs of text extends below the image.

What you have to do is also float the div after the p tag. But to make it float you will have to give it specific width too. The following code should solve your problem:

    a {        display: block;        float: left;        max-width: 400px;        border: 1px solid cyan;        padding: 2px;    }        a > p {        float: left;        border: 1px dotted green;        margin-right: 2px;    }        a > div {        float: left;        max-width: 350px;        border: 1px dotted red;    }

       <a href="">            <p>                <img src="https://i.stack.imgur.com/8lMxs.png" width="24" height="24" alt="Sample Image">            </p>            <div>                <span>        <h3>File my gcr labour relations, greiviences, improvements and desiplnies and on and on</h3>         Created: monday morning for al of em.  </span>            </div>        </a>

Stop text from wrapping under an icon inside an anchor

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>

Make text not wrap around icon in :before pseudoelement?

As you can see from the other answers, there are multiple solutions!

If the size of the square in :before is always the same, one other solution would be to add

.link {margin-left:25px; text-indent:-25px;}

to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".

http://jsfiddle.net/MrLister/3xbfyqkh/

Or what I would prefer, with sizes in ems, so that the red square depends on the font size.

.link:before {
  /* .. */
  width: 1em; height: 1em;
  margin-right: .5em;
}

.link {margin-left:1.5em; text-indent:-1.5em;}

Making sure, of course, that the indentation is the same as the size + the margin of the square.

http://jsfiddle.net/MrLister/3xbfyqkh/1/

Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...

.link {
    display:list-item; list-style:square;
    color:red;
    font-size:2em; line-height:.5em;
    margin:.5em 0 .5em 1em}

.link a {
    font-size:.417em; vertical-align:.3em}

http://jsfiddle.net/MrLister/3xbfyqkh/5/

List item text keeps wrapping under icon

A better way is to place icon with position: absolulte and add some left indent on <li>.

#facts {  padding: 0;  margin: 1% 0 0 0;  list-style: none;}
#facts li {  position: relative;  padding-left: 25px;  margin: 2% 17%;}
#facts i {  position: absolute;  font-size: 130%;  left: 0;  top: 0;}@font-face {  font-family: "Flaticon";  src: url("./Flaticon.eot");  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg");  font-weight: normal;  font-style: normal;}
@media screen and (-webkit-min-device-pixel-ratio:0) {  @font-face {    font-family: "Flaticon";    src: url("./Flaticon.svg#Flaticon") format("svg");  }}
[class^="flaticon-"]:before,[class*=" flaticon-"]:before,[class^="flaticon-"]:after,[class*=" flaticon-"]:after {  font-family: Flaticon;  .font-size: 20px;  font-style: normal;  .margin-left: 20px;}
.flaticon-apple:before {  content: "\f100";}
.flaticon-biscuit:before {  content: "\f101";}
.flaticon-coffee-cup:before {  content: "\f102";}
.flaticon-film:before {  content: "\f103";}
.flaticon-gamepad:before {  content: "\f104";}
.flaticon-lawn-mower:before {  content: "\f105";}

<ul id="facts">  <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li>  <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li></ul>

Prevent text in list from wrapping under icon bullet?

add this styles set position:absolute to li:before and li position:relative

ul.fa-ul2 > li{
 position: relative;
}

ul.fa-ul2 li:before {
 position: absolute;
 left: -13px;
}

prevent :after element from wrapping to next line

you can add the image to the last word instead. that will make it break together.

add a class to word
<strong class="test">word</strong>

and .test:after { ...

http://jsfiddle.net/52dkR/

the trick is also to make that class to be inline-block

and if you want to keep the underline see this.

http://jsfiddle.net/atcJJ/

add text-decoration:inherit;

Attach font icon to last word in text string and prevent from wrapping

Interestingly enough, I found you only need to change one line of code for this to work.
Testing on your .container2 element in jsFiddle, change this

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline-block;
}

to

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline;
}

It seems to work with any width I set the container to and will stay connected to what ever foo will be.

---

Related Topics