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/

理想情况下，我想要实现的是子跨度扩展到最大500px，具体取决于其中的文本数量。

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

发生这种情况是因为父Span正在设置显示子跨距的最大宽度。

如果您希望子跨度更长，您可以：

将span更改为div，它与span相同，但默认情况下它占用其父容器的整个宽度，相当于将display:block放入CSS，DIV和SPAN中只有那个属性的空元素，显示：块，或显示：内联。

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

3 个答案: