css - 如何不继承css中的宽度？

Question

所以我有这个html：

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

这个CSS：

span{
    position: relative;
}

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

发生的情况是，用 css 添加的内容继承了span（单词'random'）的宽度。有没有办法删除继承的宽度而不添加宽度值来覆盖继承

这是演示http://jsfiddle.net/7dBbZ/1/ 谢谢​</p>

Answer 1

您正在寻找的是white-space:nowrap;因为元素是用display:inline. 它实际上并没有继承width，因为 BoltClock 指出它不是隐式继承的属性，而是用允许的包装填充父元素。

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

尝试使用不同的值content并亲自查看（即文本比父元素短，文本没有空格等）

Answer 2

尝试这个：

span:before {
    white-space: nowrap;
}