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

Question

<分区>

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>