CODEWITHSUNDEEP
htmlcss
Louis Maddox
Louis Maddox

Reputation: 5576

Prevent newline break with span and p tag

I have some CSS which inserts a dash, unicode U+2014 —, to give a nice formatting on my site ahead of the stated source. Annoyingly it is breaking a new line after this (I've tried changing from span to div but no use).

Screenshot inspecting the element in Chrome

The document tree looks like:

<span class="source">...</span>
<p>Source author, text goes here etc. etc.</p>

The computed style for the span line includes display:inline, whereas the computed style for p has display:block, which I'm guessing may be causing the new line?

I'm reading through the relevant CSS and can't see any reason why it should start a new line, I don't have \A in the content as in this question ...

Can any CSS whiz point me to what I'm missing? Alternative implementation of the ::before pseudo-element required perhaps?

The CSS involved here is

div.source:before{content:"\2014";margin-left:0.9em;margin-right:0.9em; white-space:nowrap;}#content

(I inserted white-space:nowrap a while ago trying to fix this but it didn't do anything to the new line)

Upvotes: 1

Views: 9032

Answers (2)

Harry
Harry

Reputation: 89780

You could try using the adjacent sibling selector (+) like shown below. It is supported in IE >= 7.

HTML:

<span class="source">&mdash;</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>

CSS:

.source + p{display: inline;} 
/* applies inline style to only the <p> tag directly following a tag with class=source */

Fiddle Demo | Browser Support

Upvotes: 2

Steve
Steve

Reputation: 8640

Why don't you add the class="source" directly to the p tag, rather than adding an unnecessary span?

The behavior as you see it right now is correct, because p elements are by default block level elements. You could give it a style of display: inline; but as I mentioned above, it would be better to get rid of the span and add the class to the p tag.

Upvotes: 0

Related Questions