Question

假设我们有以下元素：

<div>STACKOVERFLOW</div>

我们希望将A设为红色，但不更改单词的字距调整属性。换句话说，我们希望这个词的显示方式与以前完全相同。这里有一个类似的问题：

change-color-of-one-character-in-a-text-box-html-css

但是，使用span元素会更改单词的字距调整属性（在A前面添加更多空格）。

以下是referenced SO question

中jsfiddle的截图

正如您所看到的，span元素看起来增加了一些空间。

更新

我会添加一个截图以及一些代码以显示我的意思。如果您在屏幕截图中查看单词ICON，则会将其标记为这样（并且跨度会导致添加额外空间）：

    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
    <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
    <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span></h1>

div { font-size: 3em; background: blue; display: inline-block; }
span { color: red; }

<div>STACKOVERFLOW</div>
<div>ST<span>A</span>CKOVERFLOW</div>
<img src="https://i.stack.imgur.com/EjnDF.png">

评论中的每个请求颜色实用程序来自SuperflyCSS Color Utilities

字体实用程序来自SuperflyCSS Font Utilities

u-text-uppercase实用程序来自SuperflyCSS Format Utilities

的字体实用程序

另一次更新

谢谢你们 - 在接受的答案中提到的关键是将元素保持在同一行。当我这样做时，这就是结果：

Answer 1

你只需要将它保持在一行！

您可以使用：

IconUtility Tests

或：

Icon

或者你可以在父母和父母身上使用font-size: 0重置其子字体大小或使用float: left和 

.third {  font-size: 0;  }

.third span {  font-size: 16px;  }

.fourth span {
  float: left;
}

<strong>First:</strong><br>
<span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>

<br><br>
<strong>Second:</strong><br>

<span class="second">
<span>Ic</span>
<span>o</span>
<span>n</span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Third:</strong><br>

<span class="third">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Fourth:</strong><br>

<span class="fourth">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>&nbsp;Utility Tests</span>
</span>

Answer 2

我认为这应该对你有所帮助。请试试这个。为了避免额外的空间，我使用font-size:0到h1代码，因为span标记已采用默认属性display:inline-block。

＆＃13;

h1{
  text-transform:uppercase;
  font-weight:normal;
  font-size:0;
}
.u-text-color-md-pink-a200{
  color:#FF4081;
}
.u-font-weight-900{
  font-weight:bold;
}
h1 span{
  font-size:30px;
}

＆＃13;

<h1>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
  <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
  <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
</h1>

＆＃13;

Answer 3

您仍然可以使用，并对其应用负余量。

＆＃13;

#one{
  color:#ff0000;
}
#two{
  color:#ff0000;
  margin:0 -0.04em;
}
div { 
  font-size: 3em; background: blue; display: inline-block; 
}

＆＃13;

<!--Old Span-->
<div>ST<span id="one">A</span>CKOVERFLOW</div>
<!--New Span-->
<div>ST<span id="two">A</span>CKOVERFLOW</div>
<!--Original-->
<div>STACKOVERFLOW</div>

＆＃13;

更改单词中一个字符的颜色而不更改单词的字距调整属性？

更新

另一次更新

3 个答案: