0

Is it possible using CSS3 to insert a line break after a specific character in the HTML? In this case, we need to insert a line break after the exclamation mark !. This talks about the :before pseudo-element and content. Is this possible for putting a newline after an exclamation mark?

Community
  • 1
  • 1
Alex
  • 34,699
  • 13
  • 75
  • 158
  • I am a little confused on what you are asking specifically and it would help to see some code. In CSS there is an :after element so if what you want can be done with :before, it most likely can also be done with :after. http://www.w3schools.com/cssref/sel_after.asp – crazymatt Apr 01 '15 at 20:54

1 Answers1

1

With pure CSS, it isn't possible to just find all of the exclamation marks on the page. However, if you happen to have everything that ends with an exclamation mark in its own element, you can add a class to it that has some :after pseudo-content.

.new-line:after {
  content: "";
  display: block;
}

Making the :after content display: block allows the content to take up the whole space of the line, forcing the elements coming after it to the next line. https://jsfiddle.net/5mL48tyc/

However, wrapping everything in a <span> isn't the most elegant solution. Not sure what you're working with, but assuming that the exclamation points are at the ends of chunks of text, you could simply just give those chunks a container with display: block.

conz
  • 116
  • 1
  • 4
  • Thanks, @conz. That's what I was thinking -- that it's not possible to find all the `!` and apply an `:after` to each. It would require some jQuery, which in the case of this particular situation, is not possible. I had access to the CSS only and needed to wrap the text on the `!`. – Alex Apr 02 '15 at 01:24