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

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，但是有一个旋转的字母？

更新

solution of delinear似乎是正确的，但Chrome（62.0.3202.62）无法正确支持多个字母以这种方式设置样式。在大多数情况下，Chrome会成功提供正确的破解行为，但有时会失败，请参阅https://jsfiddle.net/htq2eqnk/2/（尝试调整窗口大小）：

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.