html - 附加带有显示内联 block 的 div，最后一个单词用于包装

Question

是否可以仅使用纯 css 将 span 内的最后两个 div 附加到它的最后一个词，以便它用最后一个词换行？即使您动态调整窗口大小时？

这是 html :

<span>Some text that will be here
    <div class="class1" style=""></div>
    <div class="class2"></div>
</span>

这是CSS:

.class1 {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-left: 5px;
    vertical-align: text-bottom;
    background-image: url(some.png);
    background-repeat: no-repeat;
    cursor: pointer;
}
.class2 {
    float: none;
    display: inline-block;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background: url(some2.png) -154px 0px no-repeat;
    cursor: pointer;
}

当我尝试调整窗口大小时，我希望 span 仅在使用 last word 时换行。现在发生的是它首先包装 class2 div，然后是 class1 div，然后开始包装文本。我见过很多只使用 display:inline 的解决方案，但是当我在 div 上使用 display:inline 时，它​​失去了它的宽度，所以我认为这不是一个可能的解决方案。纯 css 解决方案有什么方法可以将这两个 div 附加到文本的最后一个字，以便在您调整窗口大小时将它们换行？我不能像这样将这两个 div 封装在另一个元素中:

<span>Some text that will be 
    <span class="encaps">here
        <div class="class1" style=""></div>
        <div class="class2"></div>
    </span>
</span>

因为文本的长度总是不同的，而且我之前不知道最后一个词是什么。

预先感谢您的回复。

更新

我正在写下调整窗口大小时我想要完成的一些行为示例:

Bad behaviour:

1.)
Some text will be here*div*
*div*
2.) 
Some text will be here
*div**div*

Good behaviour:

Some text will be 
here*div**div*

Answer 1

您可以将所有文本包装在一个范围内，然后允许在该范围内换行，但不能在它和 div 之间。您需要将该样式应用于容器范围。其工作原理如下。

请注意，我对您的示例做了一些非常小的更改(将 span 中的 div 更改为 span 以使 HTML 有效，更改图像 URL 以便它们解析为某些内容，微小的样式更改)，但主要思想是样式.wrap 和 .nowrap 元素。 .wrap 元素是一个添加的元素，一个包裹文本的 span。

我创建了一个 JSFiddle以及，因此更容易更改视口(viewport)大小和测试环绕。

.class1 {
  display: inline-block;
  vertical-align: text-bottom;
  width: 19px;
  height: 19px;
  margin-left: 5px;
  background-image: url('https://placehold.it/19');
  background-repeat: no-repeat;
  cursor: pointer;
}

.class2 {
  display: inline-block;
  vertical-align: text-bottom;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url('https://placehold.it/20') no-repeat;
  cursor: pointer;
}

.nowrap {
  white-space: nowrap;
  /* no line breaking */
  font-size: 0;
  /* hide text between text and divs */
}

.wrap {
  white-space: normal;
  /* allow line breaks in span */
  font-size: 1rem;
  /* normal font size */
}

<span class="nowrap">
  <span class="wrap">Some text that will be here</span>
  <span class="class1"></span>
  <span class="class2"></span>
</span>