没有设置宽度的元素内的CSS空格

Question

我有一个跨度在另一个跨度中，孩子没有设置宽度，所以文本在1或2个单词之后进入一个新行。

下面是代码和jsfiddle，这将有助于更好地了解我的意思。

<span class="container">Lorem ipsum dolor 
    <span class="child">Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut risus enim, tincidunt ac tristique quis, vulputate sed nulla. Nam imperdiet imperdiet mollis. Vestibulum sed elit lorem, et luctus massa. Vivamus eleifend ante vel odio lacinia. 
    </span> 
</span> 

CSS：

.container { 
    width:auto; 
    background-color:red; 
    position:relative; 
} 

.child { 
    position:absolute; 
    top:35px; 
    left:10px; 
    max-width:500px; 
    background-color:yellow; 
    /*white-space:nowrap; This does not work because the text does not wrap after 500px */ 
} 

http://jsfiddle.net/RRx6r/

我非常想实现的是孩子跨度扩展到依赖于它的文字量最大的500像素。

white-space：nowrap不起作用，因为该行永不中断。

任何想法？

Answer 1

添加

display:block; 

要么在.container，或两者.container和.child（取决于问题与其他CSS规则）。请注意，您还需要在容器上设置最大宽度，否则它将增长到任何可用空间。

See this Fiddle

Answer 2

如果位置的元件绝对（position:absolute;），比必须设置一个特定的宽度。否则元素（肯定是一个内联元素，如SPAN）将缩小到所需的最小宽度。

一个选项可能是将父元素设置为display: block;，这会导致它扩展到可用的最大宽度。这样内部元素有机会扩展到500px宽度。

http://jsfiddle.net/RRx6r/2/

Answer 3

简而言之：父跨度更改为DIV

这发生在你身上，因为父跨度设定，其中，子跨度显示在最大宽度。

如果你希望孩子跨度较长，您可以：

变化跨度到一个div，这是一样的跨度，但默认情况下它需要它的父容器的整个宽度，它相当于将display:block放入您的CSS中，DIV和SPAN是仅具有该属性的空元素，display：block或display：inline。