CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 9402

How to force CSS to be displayed on empty element following whitespace

I've got an empty element that appears at the end of a list of children. The purpose of the element is to display the CSS border that I have assigned:

.test {
    border-left:solid 1px Black;
}

And then the HTML looks something like this:

<p>This is a test.<span class='test'></span></p>

Normally this displays fine, but if the previous element is text which ends in a space, the element is no longer rendered:

<p>This is a test. <span class='test'></span></p>

I've created a Fiddle which demonstrates this. I expect both lines to have a vertical bar (from the CSS) at the end, but only the second one does.

What's going on here? How can I get both lines to display the CSS border?

Upvotes: 2

Views: 798

Answers (4)

stekhn
stekhn

Reputation: 2087

The problem is that by the default your span has only 1px width. This might cause a rendering problem. Adding &nbsp; fixes your problem:

<p>This is a test 1.<span class='test'>&nbsp;</span></p>
<p>This is a test 2.<span class='test'>&nbsp;</span></p>

Alternatively you could just add a margin to your span, since inline elements can't have a fixed width (Thanks Michael):

.test {
    border-left:solid 1px Black;
    margin: 0 2px;
}

Upvotes: 1

Martin Braun
Martin Braun

Reputation: 12599

<p>This is a test. <span class='test'>&nbsp;</span></p>

or even better:

.test:after {
    content: "\00a0";
}

Demo: http://jsfiddle.net/4AG6r/13/

All the span needs is some content to avoid browser specific render issues.

Upvotes: 1

Matt Cremeens
Matt Cremeens

Reputation: 5151

You can set the width of your p element to be only wide enough to hold what's in it (e.g., 100px) and then use border-right in the test class. So, 

p {
  width: 100px;
}

.test {
  border-right: solid 1px Black;
}

Upvotes: 0

JonatasTeixeira
JonatasTeixeira

Reputation: 1492

Try to put your text information inside <span> ... </span> and change the side of you css border.

http://jsfiddle.net/L2Fbg/

.test {
    border-right:solid 1px Black;
}

<p><span class='test'>This is a test.</span></p>
<p><span class='test'>This is a test. </span></p>

Upvotes: -1

Related Questions