CODEWITHSUNDEEP
css
Rn2dy
Rn2dy

Reputation: 4190

Text in span element does display properly?

It is weird. Here is the problem: I have some text within 'span' tag, whenever I put some special characters in the text, these characters will be shown in weird places! suppose I have this:

<span>Your birthday</span> 
<span>(must be in the format of MM/DD/YYYY)</span>

it will be rendered like this:

(Your birthday (must be in the format of MM/DD/YYYY

any idea of what's happening?

Updates:

The problem is not related to browser, and I can not reproduce this on JSFiddle. If I change the span to be inline-block, then the bracket can be displayed correctly. However, there is another problem: if the first word in span is a number it will be put at the end, e.g.

<span>123 555 444 666</span>
<span>123 main street</span>

will be rendered as:

666 444 555 123 <- gets reverted! 
main street 123

Upvotes: 0

Views: 191

Answers (2)

Scott Simpson
Scott Simpson

Reputation: 3850

Works OK in JSFiddle: http://jsfiddle.net/simply_simpy/fmE5j/

Can you replicate?

Upvotes: 0

Rob W
Rob W

Reputation: 349262

Use <div>, or add display:block to your span.

"It" is happening, because <span> elements are inline elements. Inline elements allow other inline elements at the same line.

All of the following lines will produce:

Foo
Bar

<div>Foo</div> <div>Bar</div>

<span style="display:block;">Foo</span> <span style="display:block;">Bar</span>

<style>span {display:block}</style>
<span>Foo</span><span>Bar</span>

Upvotes: 1

Related Questions