5

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

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

.redColor{color:red}
.redBg{background:red}
div{font-size:26pt}
<div>
کلمات به هم پیوسته
<br>
کلمات به هم پیوس<span class="redColor">ته</span>
<br>
کلمات به هم پیوس<span class="redBg">ته</span>
</div>

4

1 回答 1

2

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

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

于 2019-03-16T13:59:53.077 回答