在上下文字符上应用样式会破坏单词

Question

我在阿拉伯语和波斯语字符中存在问题，因为它们具有上下文（连接的）字符，当我要指示关键字时，包含该关键字的单词会分解为较小的单词。我的问题是如何在关键字上应用CSS样式而不破坏主词？

如您在以下示例中看到的，字符？我在其上应用样式时将其与下一个字符分开。

.redColor{color:red}
.redBg{background:red}
div{font-size:26pt}

<div>
????? ?? ?? ??????
<br>
????? ?? ?? ????<span class="redColor">??</span>
<br>
????? ?? ?? ????<span class="redBg">??</span>
</div>

Answer 1

一种解决方案是考虑渐变着色，调整大小/位置以获得所需的着色。缺点是您需要正确找到不同的值，这些值将根据您想要定位的字符和字体属性而变化：

\n\n

\r\n

\r\n

.redBg {\r\n  background: \r\n    linear-gradient(red,red) left/23px 100% no-repeat;\r\n}\r\n.blueBg {\r\n  background: \r\n    linear-gradient(green,green) 40px 0/32px 100% no-repeat;\r\n}\r\n\r\n.redColor {\r\n  background: \r\n    linear-gradient(red,red) left/23px 100% no-repeat,\r\n    #000;\r\n  background-clip: text;\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n.blueColor {\r\n  background: \r\n    linear-gradient(green,green) 40px 0/32px 100% no-repeat,\r\n    #000;\r\n  background-clip: text;\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n\r\n\r\ndiv {\r\n  font-size: 26pt;\r\n  display:inline-block;\r\n}

\r\n

<div class="redBg">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="blueBg">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="redColor">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="blueColor">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>

\r\n

\r\n

\r\n

\n\n

您还可以轻松缩放到多个背景，以便在同一句子中定位更多字符：

\n\n

\r\n

\r\n

.redBg {\r\n  background: \r\n    linear-gradient(red,red) left/23px 100%,\r\n    linear-gradient(pink,pink) 80px 0/25px 100%;\r\n  background-repeat:no-repeat;\r\n}\r\n.blueBg {\r\n  background: \r\n    linear-gradient(green,green) 40px 0/32px 100% no-repeat;\r\n}\r\n\r\n.redColor {\r\n  background: \r\n    linear-gradient(red,red) left/23px 100%,\r\n    linear-gradient(blue,blue) right/45px 100%,\r\n    #000;\r\n  background-repeat:no-repeat;\r\n  background-clip: text;\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n.blueColor {\r\n  background: \r\n    linear-gradient(green,green) 40px 0/32px 100% no-repeat,\r\n    #000;\r\n  background-clip: text;\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n\r\n\r\ndiv {\r\n  font-size: 26pt;\r\n  display:inline-block;\r\n}

\r\n

<div class="redBg">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="blueBg">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="redColor">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>\r\n  <br>\r\n  <div class="blueColor">\r\n  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87</div>

\r\n

\r\n

\r\n

\n\n

另一个想法是复制文本，您可以轻松地应用所需的样式，并使用溢出剪切其中一个文本（使用此方法不会有换行符）

\n\n

\r\n

\r\n

.redColor:after {\r\n  color:red;\r\n  width:25px;\r\n}\r\n.blueColor:after {\r\n  color:blue; \r\n  width:30px;\r\n  text-indent:-42px;\r\n  left:42px;\r\n}\r\n\r\ndiv {\r\n  font-size: 26pt;\r\n  display:inline-block;\r\n  position:relative;\r\n}\r\ndiv:before,\r\ndiv:after{\r\n  content:attr(data-text);\r\n}\r\n\r\ndiv:after {\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n  white-space:nowrap;\r\n  overflow:hidden;\r\n  background:#fff;\r\n}

\r\n

<div class="redColor" data-text="  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87">\r\n</div>\r\n<br>\r\n<div class="blueColor" data-text="  \xda\xa9\xd9\x84\xd9\x85\xd8\xa7\xd8\xaa \xd8\xa8\xd9\x87 \xd9\x87\xd9\x85 \xd9\xbe\xdb\x8c\xd9\x88\xd8\xb3\xd8\xaa\xd9\x87">\r\n</div>

\r\n

\r\n

\r\n

\n