JS把每個文字拆為獨立的div
<h1 class="mod modTit mod-1670960919" style="width: 100%; position: relative; margin: 50px auto 20px">
<style type="text/css">
.mod-1670960919 .textToDiv > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(var(--modRgb), 0.6);
margin: 0.2em !important;
padding: 0.5em;
border-radius: 100%;
box-shadow: 0 0 0.3em rgba(var(--modRgb), 1);
background: rgba(var(--modRgb), 0.06);
width: 2em;
height: 2em;
}
</style>
<section class="tit" style="text-align: center; color: rgba(var(--modRgb), 1)">
<p class="textToDiv" style="margin: 0; padding: 0; font-size: 21px; display: flex; flex-wrap: wrap; justify-content: center;">替換文字</p>
</section>
<script type="text/javascript">
var TextToDiv = {
init: function (e) {
var t = document.querySelector(e),
n = t.innerHTML;
t.innerHTML = "";
for (var i = 0; i < n.length; i++) {
var o = n[i],
r = document.createElement("div"),
d = document.createTextNode(o);
r.appendChild(d), t.appendChild(r);
}
}
};
TextToDiv.init(".mod-1670960919 .textToDiv");
</script>
</h1>