Html 将一个div附加到另一个div的右侧，但流向下一行

我想将3个div（或span）与可变长度的文本并排放置，这样文本就可以像在单个元素中一样读取。我找到了这篇关于如何做的帖子。但如果我遵循本文中的方法，似乎更长的文本跨度会显示出自己的新行。我希望底线上的方框直接从顶行第二个方框（从右开始）的右侧开始我希望任何不适合第一行的文本都能在第二行继续。我不知道如何在CSS+HTML中实现这一点

<div style="position: relative;">

    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis inasdf aadsf aasda ss</div>
    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis </div>
    <div style="font-size: 14px; display: inline; border: 1px solid green; float: left;">Lorem us turpis inasdf aadsf aasda ss</div>

</div>

Lorem us turpis INADF aadsf aasda ss
乌龟
Lorem us turpis INADF aadsf aasda ss

如果您使用

元素，它不应该断开，而是按照您的意愿进行包装

在Safari和FF中测试

.text{
字体大小：14px；
边框：1px纯绿色；
}

Lorem us turpis INADF aadsf aasda ss
乌龟
Lorem us turpis INADF aadsf aasda ss

这可以通过使用

标记轻松实现。我将您的

标记切换为

标记，并将所有3个跨距放置在

标记内。这适用于带和不带

标记的情况。为了更好的可读性，我将样式分为一个名为

text

的类。最后，我增加了字体大小，这样文本更有可能在屏幕上环绕，从而证明这一点

.text{
字体大小：25px；
边框：1px纯绿色；
}

Lorem us turpis INADF aadsf aasda ss
乌龟
Lorem us turpis INADF aadsf aasda ss