来自维基百科：
草书（Cursive）是任何一种为了快速手写笔记和信件而设计的手写风格。在阿拉伯语、拉丁字母和西里尔字母写作系统中，一个单词中的字母是连在一起的，形成一个完整的笔画。
在上述语言中，如果想要使用<span>标签样式化某个单词以应用自定义CSS样式，则会打破单词连接，那么有没有解决方法呢？
例如，下面是一个普通的阿拉伯语单词示例：
因为前两个字母在一个标签中，而最后一个字母在另一个标签中才能进行着色。
有什么方法可以避免单词分开吗？
以下是完整的HTML代码：
<p>كت<span style="color: Red;">ب</span></p>
我不确定是否有任何HTML方法可以做到这一点，但你可以通过在打开标签之前添加零宽连接符Unicode字符来修复它：
<p>كت‍<span style="color: Red;">ب</span></p>
当然，您可以使用实际的Unicode字符而不是HTML字符实体，但在这里它并不可见。或者您可以使用更美观的‍实体。
以下是使用不可见的<b>标记演示（因为我无法在此处设置字体颜色），它没有连接符：
这是使用连接符的演示：
据我所知，它应该在没有连接符的情况下工作，但在某些浏览器中确实如此，但显然不是所有浏览器。
更新 2020/5
Google Chrome（已检查版本为81.0.4044.138）和Firefox（76.0.1）已解决呈现阿拉伯语和波斯语单词时的此问题，因此不再需要手动处理这种情况。使用<span style="color:red">关键字</span>将关键字包装起来，在连接和非连接字符中都能正常工作。
因此，您可能无法看到以下正确和错误示例之间的区别：
主要内容：
在被接受的答案7年后，我想添加一个新答案，其中包含更多实用细节，因为我的母语是波斯语。 我假设我们想要在一个长单词中替换一个关键字。 此答案考虑以下细节：
1- 有时仅向前一个字符添加‍是不够的，因为下一个字符也应该具有尾巴以完成连接。
body{font-size:36pt;}
span{color:red}Wrong: مک‍<span>انیک</span>
<br>
Correct: مک‍<span>‍انیک</span>2- 我们可能还需要在关键词后面加上 ，以将其连接到下一个字符。
body{font-size:36pt;}
span{color:red}Wrong: مک‍<span>‍انیک</span>ی
<br>
Correct: مک‍<span>‍انیک‍</span>‍ی3- 有一些字符在接受尾巴之前但不接受尾巴之后。因此，我们必须将它们排除在接受其后的尾巴之外。以下是下一个字符不连接的字符列表： ا آ د ذ ر ز ژ و
4- 最后为了尊重搜索引擎和爬虫，我建议使用JavaScript（jQuery）在DOM准备就绪后替换关键字，以保持页面源代码的干净。
这是我的最终代码，包括以上所有细节：
$(document).ready(function(){
var tail="\u200D";
var keyword="ستر";
$(".searchableContent").each(function(){
var htm=$(this).html();
/*
preserve keywords which have space both before and after
with a temp sign say #fullHolder#
*/
htm=htm.split(' '+keyword+' ').join(' #fullHolder# ');
/*
preserve keywords which have only space after
with a temp sign say #preHolder#
*/
htm=htm.split(keyword+' ').join('#preHolder#'+' ');
/*
preserve keywords which have only space before
with a temp sign say #nextHolder#
*/
htm=htm.split(' '+keyword).join(' '+'#nextHolder#');
/*
replace remaining keywords with marked up span.
Add tail to both side of span to make sure it is
connected to both letters before and after
*/
htm=htm.split(keyword).join(tail+'<span style="color:#ff0000">'+tail+keyword+tail+'</span>'+tail);
//Deal #preHolder# by adding tail only before the keyword
htm=htm.split('#preHolder#'+' ').join(tail+'<span style="color:#ff0000">'+tail+keyword+'</span>'+' ');
//Deal #nextHolder# by adding tail only after the keyword
htm=htm.split(' '+'#nextHolder#').join(' '+'<span style="color:#ff0000">'+keyword+tail+'</span>'+tail);
//Deal #fullHolder# by adding markup only without tail
htm=htm.split(' '+'#fullHolder#'+' ').join(' '+'<span style="color:#ff0000">'+keyword+'</span>'+' ');
//Remove all possible combination of added tails to non-connecting characters
var nonConnectings=['ا','آ','د','ذ','ر','ز','ژ','و'];
for (x = 0; x < nonConnectings.length; x++) {
htm=htm.split(nonConnectings[x]+tail).join(nonConnectings[x]);
htm=htm.split(nonConnectings[x]+'<span style="color:#ff0000">'+tail).join(nonConnectings[x]+'<span style="color:#ff0000">');
htm=htm.split(nonConnectings[x]+'</span>'+tail).join(nonConnectings[x]+'</span>');
}
$(this).html(htm);
})
})div{font-size:26pt}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchableContent">
سترون - بستری - آستر - بستر - استراحت
</div>سترون显示不正确。 - azerafati