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

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

.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>

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

1 个答案: