Prevent :After Element from Wrapping to Next Line

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;

Avoid line wrap between ::before pseudo-element and next word

The problem is that the line break happens between the pseudo-element and the content, so you can't avoid it by setting white-space only to the pseudo-element.

Instead, you can wrap the content of the anchor inside a span, set white-space: nowrap to the entire anchor, and restore the initial white-space: normal in the span.

.pre-icon {
  white-space: nowrap;
}
.pre-icon > span {
  white-space: normal;
}

.pre-icon::before {  content: "";  display: inline-block;  width: 6px;  height: 10px;  background-color: transparent;  background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);  background-repeat: no-repeat;  margin-left: .13em;  margin-right: .25em;}.pre-icon {  white-space: nowrap;}.pre-icon > span {  white-space: normal;}

Text text <a class="pre-icon" href="#"><span>FirstWord word2 word3</span></a> text after link.

Force no line-break on pseudo element (:after)

You can also go with using the standard diamond from UTF8: ◇.

If you let your :after as display: inline it will not break because you're not adding any space between the last word and it.

.alpha.solution3:after {  display: inline;  content: "◇";  font-weight: normal;  font-size: 1.2em;}

<h1 class="alpha solution3">A solution that does not require Javascript neither a SPAN</h1>

How to avoid line breaks after :before in CSS

Simply removing the display:inline-block; seems to fix this issue:

a.some-link:before {
    font-family: icons;
    padding-right: 0.3em;
    content: 'x';
}

JSFiddle.

Unfortunately, you need "display: inline-block" to show SVG. Simple solution is to put "display: inline-block" on the "a". This will cause your SVG to render properly AND it will keep your a:before and the a together on one line.

How to prevent line-breaks between an element and its after-element?

Your css selector was targeting the wrong element. It has to point to dt:after

dt:after {
  content: ":";
  position: relative;
  display: inline-block;
}

<dl>
  <dt>cat name</dt>
  <dd>Puss</dd>
</dl>
<dl>
  <dt>dog name</dt>
  <dd>Lassie</dd>
</dl>
<dl>
  <dt>horse name</dt>
  <dd>Fury</dd>
</dl>

Prevent pseudo-element from breaking a line by itself

You can add a negative margin equal to the icon size and use padding on the parent element to rectify this. This trick will enable the break when we reach the first word and logically the icon will follow.

I also removed the margin-left and made the width bigger then adjusted the backgound position to the right.

p {  padding-right:22px;}.txtbtn {  font-size: 1.125rem;  line-height: 1.222222222;  letter-spacing: 2.57px;  color: orange;  text-decoration: none;  position: relative;  text-transform: uppercase;}
.txtbtn::after {  position: relative;  top: 0;  display: inline-block;  margin-right:-32px;  width: 32px;  height: 15px;  content: "";  background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat right/contain;}

<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>

How to prevent inline divs from jumping to the next line within a parent?

You can use position: absolute; for this, else no other way except increasing your container div width or making it nowrap

Demo

Using z-index Demo

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}

Prevent div from wrapping to next line

You can achieve this using a combination of overflow and float. This works due to the fact that overflow: hidden establishes a new block formatting context. To paraphrase:

The border box of an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself (in which case the box itself may become narrower due to the floats).

See: http://jsfiddle.net/m8x1g0q8/

CSS Make text wrap when :before pseudo element is too big

First off, you'll want the element to be an inline-block, not an inline, as you don't want its content to flow like normal text. I'd replace the span with a div to keep it semantically accurate. Then you want it to take 50% of its parent, just like the :before.

50% + 50% + a couple pixels of borders will be too big to fit in the parent element, so the second inline-block will wrap. To prevent this, use border-box which makes the css width property include the border and padding. This code will apply that to all elements on a site, which is what many modern sites do because it makes CSS much simpler.

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

The problem with inline-block element is that a single space is kept between them, so even with two elements at 50%, a space will exist in-between. To prevent that... you have to remove the space in the HTML code.

<div class="parent"><div>
  This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div></div>

So don't put a newline or any whitespace between the parent and the child div. It's a shame, but there isn't much else we can do. Except this, which also works:

<div class="parent"><!--
  --><div>
    This is a string which is too long to fit in the parent next to it's :before pseudo selector
  </div><!--
--></div>

But it's quite ugly.

Now you also need to put a vertical alignment on your elements so that they align to the top and not baseline.

And voilà:

*, *:before, *:after {  box-sizing: inherit;}html {  box-sizing: border-box;}
.parent {  width: 600px;  border: 1px solid black;  white-space: normal;}
.parent:before {  content: "Before Pseudo Element";  display: inline-block;  width: 50%;  border: 1px solid green;  vertical-align: top;}
.parent div {  display: inline-block;  max-width: 50%;  border: 1px solid blue;  white-space: normal;}

<div class="parent"><div>  This is a string which is too long to fit in the parent next to it's :before pseudo selector</div></div>