Html 元素中没有设置宽度的CSS空白

我在另一个跨距中有一个跨距，在这个跨距中，孩子没有设置宽度，因此文本在仅仅1或2个单词之后就进入新行

下面是代码和一个JSFIDLE，这将有助于更好地理解我的意思

<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>

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

空白：nowrap不起作用，因为这条线从不中断

有什么想法吗？

添加

display:block;

连接到

.container

，或同时连接到

.container

和

.child

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

---

如果绝对定位元素（

位置：绝对；

），则必须设置特定的宽度。否则，元素（当然还有像

SPAN

这样的内联元素）将收缩到所需的最小宽度

一个选项是将父元素设置为

display:block，这导致它扩展到可用的最大宽度。这样，内部元素有机会扩展到500px的宽度

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

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

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

将span更改为div，这与span相同，但默认情况下它采用其父容器的全宽，这相当于将
display:block
放入CSS中，div和span是空元素，实际上只有该属性，display:block或display:inline。
确定。因此，如果我没有（不能）将容器设置为display:block，那么唯一的其他方法就是在子元素上设置宽度？是吗？如果容器不能是块，您可以尝试将其设置为“表单元格”：但这可能会在布局中产生不需要的结果，可能需要在某个地方使用“clearfix”。我想我会坚持在子容器上设置固定宽度。不会有很多情况下，文本量会导致它的宽度远远小于500px。谢谢
display:block;