在保持不间断空格的同时转换单个字母

Question

我有一个带有不间断空格的居中文本，例如：

<p>Never break these&nbsp;two or these&nbsp;two</p>

我想在保持不间断行为的同时转换单个字母。我尝试在字母周围添加一个跨度以像这样进行转换：

<p>Never break these&nbsp;two or <span>t</span>hese&nbsp;two</p>

span { 
  display: inline-block;
  position: relative;
  transform: rotate(30deg);
}

但不幸的是，因为我使跨度 inline-block 使转换起作用，所以这会造成不希望的中断。

参见：https://jsfiddle.net/hd84cvpf/

关于如何获得所需行为的任何线索，就像没有 span 但有一个旋转的字母一样？

更新：

seems correct, but not properly supported by Chrome (62.0.3202.62) when several letters are styled this way. In most cases, Chrome succeeds to provide the proper breaking behaviour, but sometimes it fails, see https://jsfiddle.net/htq2eqnk/2/（尝试调整window）：

Firefox 总是正常中断。

解决方法：

我目前的解决方法是在需要的地方手动中断使用 <br /> 元素，我可以根据媒体查询使用 display:none 禁用更大的屏幕尺寸。它有点难看而且不通用，但它适用于简短但重要的文本。

Answer 1

我能看到实现此目的的唯一方法是在您不想中断的元素周围添加一个包装器，并应用 white-space: nowrap 样式。

<p>Never break these&nbsp;two or <span class="wrapper"><span class="inner">t</span>hese&nbsp;two</span></p>

span.inner {
  display: inline-block;
  position: relative;
  transform: rotate(30deg);
}

span.wrapper {
  white-space: nowrap;
}

JS Fiddle example.

在保持不间断空格的同时转换单个字母

Transform individual letters while keeping non-breaking spaces

html

css

css-transforms

更新：

解决方法：