將div與顯示內聯塊相連，最後一個詞用於包裝

Question

是否有可能只用純CSS將最後兩個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; 
} 

我想要的跨度，當我嘗試調整窗口的大小與使用的最後一個字的只有包裝。現在發生的事情是，它首先包裝class2 div，然後是class1 div，然後開始包裝文本。我見過很多使用顯示的解決方案：內聯，但是當我使用display：內聯div時，它丟失了寬度，所以我不認爲它是一個可能的解決方案。有沒有什麼方法可以用純css解決方案將這兩個div與文本的最後一個單詞連接起來，以便在調整窗口大小時將它們包裝在一起？我不能硬道理封裝與另一個元素中的兩個div像這樣：

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

由於文本始終是不同的長度，我不硬道理會是怎樣知道之前。

非常感謝您的回覆。

UPDATE

我寫下來，我要完成時，窗口大小調整行爲的一些例子：

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之間。您將需要將該樣式應用於容器跨度。這工作如下。

請注意，我對您的示例做了一些非常小的更改（將跨度更改爲跨度以使HTML有效，更改後的圖片網址以便解決某些問題，更小的樣式更改），但主要想法是.wrap和.nowrap元素。 .wrap元素是一個添加元素，span包裝文本。

我也創建了JSFiddle，所以更改視口大小和測試包裝更容易。

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