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

概述假设我们有以下元素： <div>STACKOVERFLOW</div> 我们想要使A变红,但不改变单词的字距调整属性.换句话说,我们希望这个词的显示方式与以前完全相同.这里有一个类似的问题： change-color-of-one-character-in-a-text-box-html-css 但是,使用span元素会更改单词的字距调整属性(在A前面添加更多空格). 这是referenced S 假设我们有以下元素：

<div>STACKOVERFLOW</div>

我们想要使A变红,但不改变单词的字距调整属性.换句话说,我们希望这个词的显示方式与以前完全相同.这里有一个类似的问题：

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

但是,使用span元素会更改单词的字距调整属性(在A前面添加更多空格).

这是referenced SO question中Jsfiddle的截图

正如您所看到的那样,span元素会增加更多空间.

更新

我将添加一个截图和一些代码来显示我的意思.如果你在屏幕截图中看到ICON这个词,它会被标记为这样(并且跨度会导致额外的空间被添加)：

<span >Ic</span>    <span >o</span>    <span >n</span>    <span >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的字体实用程序

另一个更新

谢谢你们 – 在接受的答案中提到的关键是保持< span>同一条线上的元素.当我这样做时,这是结果：

解决方法 你只需要将它保持在一条线上！

你可以使用：

< 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“>实用程序测试< / span>

要么：

< span class =“u-text-uppercase u-text-color-md-grey-900 u-Font-weight-900”> Ic< span class =“u-text-color-md-pink-a200” > O< /跨度将N< /跨度> 或者你可以在parent&amp ;;上使用Font-size：0重置其子字体大小或使用float：left和a& nbsp;

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

<strong>First:</strong><br><span >Ic<span>o</span>n</span> <span>Utility Tests</span><br><br><strong>Second:</strong><br><span ><span>Ic</span><span>o</span><span>n</span><span>Utility Tests</span></span><br><br><strong>Third:</strong><br><span ><span>Ic</span><span>o</span><span>n </span><span>Utility Tests</span></span><br><br><strong>Fourth:</strong><br><span ><span>Ic</span><span>o</span><span>n </span><span>&nbsp;Utility Tests</span></span>

总结

以上是内存溢出为你收集整理的html – 更改单词中一个字符的颜色而不更改单词的字距调整属性？全部内容，希望文章能够帮你解决html – 更改单词中一个字符的颜色而不更改单词的字距调整属性？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。