Can I have a <span> tag ignore the CSS of its parent container?

Question

I am dealing with some HTML text that I basically have read access to. I can change things with CSS, but the actual layout of the HTML is static. I am using several hundred instances of the same type of HTML that is laid out like the following:

<div class = 'outer'>
     <span class = 'inner'>5</span> 
     Some other random text that is formatted according to the style of the outer class.    
</div>

For the purposes of the project I am working on, all of the text that I am displaying within the outer class (with the exception of the contents of the inner span) needs to justified. But the contents of the inner span need to be anchored to the start of the line. My current problem is that because all of the text is being justified, the inner span content is being pushed out to different places on the line because the text is all different.

So is there a way to have the inner span ignore the fact that the outer class is telling it to be justified? How might I go abut solving this issue?

I would be fine with the way 6 & 7 look as well as the way 8 & 9 look, just as long as it is consistent.

EDIT: CSS

.outer {
 padding-left:10px;
 padding-right:10px;
 font-family:palatino;
 font-size:17px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 -webkit-column-rule: solid 1px #999;
 border-bottom: solid 1px #999;
 text-align:justify;
 }

And then I realized I often times don't have a class set to the SPAN, so I tried to do what the answer below suggested to do like this:

.outer span{
 display:inline-block;
 width:10px;
}//But it still isn't fixing the issue of the left side alignment

Answer 1

If I understand the situation correctly, you have short paragraphs starting with a number, and the paragraphs are to be rendered as justified on both sides, but the space between the number and the first word should not be stretched. Moreover, it seems that the paragraphs start with a no-break space; otherwise I cannot understand why they start with varying-width space in the screenshot.

I don’t think there’s any CSS solution. The CSS properties for justification are rather simple, not letting you control which spaces get adjusted (even as per CSS 3 Text).

There’s a character-level solution, though, but with some risks. Instead of no-break spaces (which are treated as non-stretchable by some browsers, but not by all, and the trend seems to treat them as normal spaces except for line-breaking), use fixed-width spaces. This may however fail on IE 6, depending on font; see my notes on Unicode spaces.

You could specify that the number be surrounded by an unstretchable en space, thereby directing all stretching of spaces to other spaces on the line, by starting a paragraph as follows:

 <div class = 'outer'>
 &ensp;5&ensp;Text of the paragraph.
 </div>

The en space, being 0.5em wide, might be too wide. The four-per-em space (0.25em wide) corresponds to a typical width of a normal space when unstretched (though this depends on the font). To use it, replace   by   or by the actual U+2005 character, if using UTF-8 encoding.