标记和句号之间的换行符

Question

使用HTML和CSS，如何避免span和.之间的换行？

HTML：

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis
    lorem, quis bibendum <span style="display: inline-block; color: red;">dolor</span>.

实际结果关于某些视图宽度：

Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Proin at convallis lorem, quis bibendum dolor
.

任何关于WIEWPORT WIDTH的期望结果：

Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Proin at convallis lorem, quis bibendum dolor.

PS：将.放在span里面不是我要找的答案：）

以下是非信徒的屏幕截图（请注意，我确实从示例中移除了一个字以达到问题发生的宽度）。

Answer 1

你会选择伪吗？ 以位置编辑

span {
    display: inline-block;
    border: 1px solid red;
}
span:after {
    position: absolute;
    content: '.';
    color: black;
}

Answer 2

将所有内容包装在一个没有包装的范围内应该可以正常工作：

<span class="ext"><span>some long text</span>.</span>

span.ext {
    white-space:nowrap;
}

Answer 3

如果你可以忍受额外的包裹元素，你可以

＆＃13;

＆＃13;

span.wrap{white-space:nowrap;}
span.wrap span{
  display: inline-block; 
  color: red;
  white-space:normal;
}

＆＃13;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis lorem, quis bibendum <span class="wrap"><span>dolor</span>.</span>

＆＃13;

＆＃13;

＆＃13;

但是在一些评论中，我注意到你提到了内部span中有大量文本导致换行的情况。在这种情况下，除了以下时间段之外，您还有其他问题，因为内部有换行符的inline-block元素将作为一个块移动，而不是跟随前一个单词。

见

＆＃13;

＆＃13;

span{
  display: inline-block; 
  color: red;
}

＆＃13;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis
    lorem, quis bibendum <span>dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab delectus sunt pariatur omnis, voluptatem vero accusantium rem a, est id nihil vitae cum impedit magnam itaque qui. Quaerat maxime numquam eveniet eaque possimus quos doloremque natus sit molestiae iste, autem, rerum facilis facere mollitia modi vel fuga non, tempore quibusdam.</span>.

＆＃13;

＆＃13;

＆＃13;