html - 如何避免将段落结尾的小框移动到下一行开头的单独位置？

Question

我需要一个像这样的小方框，位于段落末尾，宽度为 10 像素，并在最后一个句号后从 10 像素开始。我的CSS如下:

CSS

.black-square {width:10px;
  height:10px;
  background:#000;
  display:inline-block;
  margin-left: 10px; }

只要段落的最后一句没有在行尾结束或非常接近行尾，当方 block 移动到下一行上的一个位置(缩进 10px)时，这种方法就可以了。

如何避免这个问题？

Answer 1

为了让黑框“粘”到段落的最后一个单词而不是落到它自己的新行:

1) 在段落的最后一个单词之后立即创建一个 span 元素，其中包含一个简单的不间断空格 nbsp; 和黑框。

2) 禁用 nbsp; 和框之间的换行:white-space: nowrap;

.black-square {
  width:10px;
  height:10px;
  background:#000;
  display:inline-block;
  }
  
.stick {
  white-space: nowrap;
}

<p>
Foo bar foo bar foo bar foo bar foo bar<span class="stick">&nbsp;<span class="black-square"></span></span>
</p>

<强> Codepen Demo - (调整大小以查看黑框包裹着最后一个单词)

注意:

CSS text module level 4中的规范描述了一个新属性wrap-before。

将来 - 当此属性将被实现时，并假设标记如下:

<p>
Foo bar foo bar foo bar foo bar foo bar <span class="black-square"></span>
</p>

我们只需使用以下命令即可实现上述行为:

.black-square {
  wrap-before: avoid;
}