How to Avoid Line Breaks After ":Before" in CSS

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.

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>

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 prevent line breaks in list items using CSS

Use white-space: nowrap;^{[1] [2]} or give that link more space by setting li's width to greater values.

---

^[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3

^[2] white-space - CSS: Cascading Style Sheets | MDN

CSS line break after n list item `inline-block`

The problem stems from css's nth child selector and the display: inline-block/block combination.

You may want a CSS fix for this, and I'm sure it exists, but this also works. It's up to you if you're that concerned about the inline conditional.

I made this span a few lines so people wouldn't have to scroll to see the code that fixes it.

This was fixed via one change in your template:

template: '<ul class="lk-color-chooser">
              <lk-color  ng-repeat-start="color in colors track by $index" color="color" ng-class="{\'selected\': selectedColor == color}">
              </lk-color>{{$index}}
              <br ng-if="($index + 1) % 3 == 0" ng-repeat-end>
           </ul>',

How can I make text appear on next line instead of overflowing?

word-wrap: break-word

But it's CSS3 - http://www.css3.com/css-word-wrap/.

How to remove line break after DIV in CSS

It's not a 'line break' that you're seeing; it's because <div> elements default to being a block element.

If you want to change the behaviour so that they appear on the same line, you can change the display property in CSS, like so:

display:inline;

or

display:inline-block;

If you still want to have width or min-width property (as stated in the question) then you would need the latter of those two, inline-block.

Hope that helps.

How to remove line break after first word, css?

Remove white-space: pre-wrap; and everything should work as expected.

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Add line break within tooltips

Just use the entity code for a linebreak in a title attribute.

---

Related Topics