JSFiddle - React, Tailwind, and code Playground
HTML
<h1>吾輩は猫であるような気がする</h1>
<h2>吾輩は猫であるような気がしないでもない</h2>
<h1 class="cool-wrap">吾輩は猫であるような気がする</h1>
<h2 class="cool-wrap">吾輩は猫であるような気がしないでもない</h2>
CSS
h1, h2, h3, h4, h5, h6 {
outline: 1px solid #f0f;
width: 27rem;
}
JavaScript
$(".cool-wrap").each(function () {
var h = $(this);
var p = "";
if (h.children().length !== 0) {
return;
}
h.text(h.text().split("").reverse().forEach(function (c, i) {
p += c;
if (i < 4) {
p += "\uFEFF";
}
}));
h.text(p.split("").reverse().join(""));
});