在上下文字符上应用样式会破坏单词[复制]

Question

这个问题在这里已有答案：

• Inserting HTML tag in the middle of Arabic word breaks word connection (cursive) 2回答

我有阿拉伯语和波斯语字符的问题，因为他们有上下文（connetced）字符，当我想指出一个关键字，包含该关键字的单词，打破较小的单词。我的问题是如何在不破坏主要单词的情况下在关键字上应用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

一种解决方案是考虑梯度着色，您可以调整尺寸/位置以获得所需的颜色。缺点是您需要根据要定位的字符和字体属性正确查找将要更改的不同值：

.redBg {
  background: 
    linear-gradient(red,red) left/23px 100% no-repeat;
}
.blueBg {
  background: 
    linear-gradient(green,green) 40px 0/32px 100% no-repeat;
}

.redColor {
  background: 
    linear-gradient(red,red) left/23px 100% no-repeat,
    #000;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blueColor {
  background: 
    linear-gradient(green,green) 40px 0/32px 100% no-repeat,
    #000;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



div {
  font-size: 26pt;
  display:inline-block;
}

<div class="redBg">
  کلمات به هم پیوسته</div>
  <br>
  <div class="blueBg">
  کلمات به هم پیوسته</div>
  <br>
  <div class="redColor">
  کلمات به هم پیوسته</div>
  <br>
  <div class="blueColor">
  کلمات به هم پیوسته</div>

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

.redBg {
  background: 
    linear-gradient(red,red) left/23px 100%,
    linear-gradient(pink,pink) 80px 0/25px 100%;
  background-repeat:no-repeat;
}
.blueBg {
  background: 
    linear-gradient(green,green) 40px 0/32px 100% no-repeat;
}

.redColor {
  background: 
    linear-gradient(red,red) left/23px 100%,
    linear-gradient(blue,blue) right/45px 100%,
    #000;
  background-repeat:no-repeat;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blueColor {
  background: 
    linear-gradient(green,green) 40px 0/32px 100% no-repeat,
    #000;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



div {
  font-size: 26pt;
  display:inline-block;
}

<div class="redBg">
  کلمات به هم پیوسته</div>
  <br>
  <div class="blueBg">
  کلمات به هم پیوسته</div>
  <br>
  <div class="redColor">
  کلمات به هم پیوسته</div>
  <br>
  <div class="blueColor">
  کلمات به هم پیوسته</div>

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

.redColor:after {
  color:red;
  width:25px;
}
.blueColor:after {
  color:blue; 
  width:30px;
  text-indent:-42px;
  left:42px;
}

div {
  font-size: 26pt;
  display:inline-block;
  position:relative;
}
div:before,
div:after{
  content:attr(data-text);
}

div:after {
  position:absolute;
  top:0;
  left:0;
  white-space:nowrap;
  overflow:hidden;
  background:#fff;
}

<div class="redColor" data-text="  کلمات به هم پیوسته">
</div>
<br>
<div class="blueColor" data-text="  کلمات به هم پیوسته">
</div>