1

我在另一个跨度内有一个跨度，其中孩子没有设定宽度，因此文本在 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 不起作用，因为该行永远不会中断。

有任何想法吗？

4

3 回答 3

1

添加

display:block;

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

看到这个小提琴

于 2012-10-10T12:46:17.270 回答
1

如果你绝对定位一个元素（position:absolute;），那么你必须设置一个特定的宽度。否则元素（当然还有像 一样的内联元素SPAN）将缩小到所需的最小宽度。

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

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

于 2012-10-10T12:47:04.887 回答
0

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

这发生在您身上，因为父 Span 正在设置子 Span 显示的最大宽度。

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

把span改成一个div，和span一样，但是默认取其父容器的全宽，相当于放入display:block你的CSS，DIV和SPAN是只有那个属性的空元素、显示：块或显示：内联。

于 2012-10-10T13:18:36.027 回答