从HTML div中删除一些文本内容，并在不影响样式的情况下删除其余文本

Question

我想从html中删除文本字符，并在不失败的情况下显示其余部分

如果字符数为20，

我有:

<p>
<span class="text-huge">TE</span>
<span class="text-huge" style="color:hsl(0, 75%, 60%);">ST</span>
<span class="text-small" style="color:hsl(0, 75%, 60%);">ing&nbsp;</span>
</p>
<p>
<span class="text-small" style="color:hsl(0, 75%, 60%);">SEn</span>
<span class="text-huge">&nbsp;</span>
</p>
<p>
<span class="text-huge">Keep some text and remove remaining with number of charectors</span>
</p>

And I want:

<p>
<span class="text-huge">TE</span>  <span class="text-huge" style="color:hsl(0, 75%, 60%);">ST</span>
<span class="text-small" style="color:hsl(0, 75%, 60%);">ing&nbsp;</span>
</p>
<p>
<span class="text-small" style="color:hsl(0, 75%, 60%);">SEn</span>
<span class="text-huge">&nbsp;</span>
</p>
<p>
<span class="text-huge">Keep som</span>
</p>

实际上我的要求是删除一些基于n(no)的字符。在应用了某些样式的句子中，这些样式不应该删除

Answer 1

如果我理解正确的话，如果文本长度超过N个字符，则需要在span中缩短文本:

<span id="span" class="text-huge">Lorem ipsum dolor sit amet</span>

注意:只有当span只包含纯文本而不包含HTML

function checkLength(n) {
const span = document.getElementById("span");
const html = span.innerHTML;
if(html.length > n) {
span.innerHTML = html.slice(0, n);
}
}