Question

是否可以使用纯css将最后两个div放在span中，并使用其最后一个单词，以便用最后一个单词换行？即使你动态调整窗口大小？

这是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，然后它开始包装文本。我已经看到很多解决方案只使用显示：内联，但当我使用显示：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>

因为文本的长度总是不同的，所以我不知道最后一个单词是什么。

提前感谢您的回复。

更新

我正在写下一些我希望在窗口调整大小时完成的行为示例：

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有效，更改图像URL以便他们解析某些内容，更改样式），但主要的想法是.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>

使用显示内联块附加div，并使用最后一个单词进行换行

1 个答案: