CODEWITHSUNDEEP
css
aurel
aurel

Reputation: 3132

How to not inherit width in css?

So I have this html: 

<p>here is some <span>random</span> content that I might use</p>​

and this css:

span{
    position: relative;
}

span:before{
    content: 'this is more content';
    position:absolute;
    color: red;
    top: -15px;
}

What happens is, the content added with css inherits the width of the span (the word 'random'). is there a way to remove the inherited width without adding a width value to override the inheritance

here is the demo http://jsfiddle.net/7dBbZ/1/ Thanks ​

Upvotes: 2

Views: 3720

Answers (2)

xiaoyi
xiaoyi

Reputation: 6751

Try this: 

span:before {
    white-space: nowrap;
}

Upvotes: 0

Oleg
Oleg

Reputation: 24998

What you're looking for is white-space:nowrap; since the element is rendered with display:inline. It doesn't actually inherit width, as BoltClock has pointed out it is not an implicitly inherited property, but rather fills the parent element with wrapping allowed.

http://jsfiddle.net/7dBbZ/5/

Try playing with different values for content and see for yourself (i.e. with text shorter than the parent element, text without spaces etc.)

Upvotes: 4

Related Questions