css 使HTML文本具有2种颜色而不生成新行

cvxl0en2  于 2023-03-20  发布在  其他
关注(0)|答案(5)|浏览(127)

我正在尝试创建包含两种颜色(黄色和白色)的HTML文本,而在切换颜色时不创建新行。

<p style="color:fc0;background-color:404040">Text Color Yellow <style="color:fff">Text Color White</p>

它不起作用,因为在style元素之前没有p来更改颜色。
我的另一种方法是做两行,但在两行灰色之间有一条空白:

<p style="color:fc0;background-color:404040">Text Color Yellow</p> 
<p style="color:fff;background-color:404040">Text Color White</p>

这个问题有解决的办法吗?

wixjitnu

wixjitnu1#

将白色文本换行到span中,然后将其color属性设置为white。

<p style="color:#fc0000;background-color:#404040">Text Color Yellow <span style="color:#ffffff">Text Color White</span></p>

**注意:**颜色代码中还缺少#符号。

yhived7q

yhived7q2#

有多种方法可以实现这一点,其中一种快捷的方法是使用<span>

<p>
  <span style="color:#ff0;background-color:#404040">Text Color Yellow</span>
  <span style="color:#fff;background-color:#404040">Text Color White</span>
</p>

另外,如果你想删除中间的行间距,你只需要像这样把它放在一行中:

<p>
  <span class="yellow">Text Color Yellow</span><span class="white">Text Color White</span>
</p>

我把风格分开了,使它更短:

.yellow {
    color: #ff0;
  background-color: #404040;
  margin: 0;
}

.white {
    color: #fff;
  background-color: #404040;
  margin: 0;
}
xam8gpfp

xam8gpfp3#

你可以使用渐变,但最好有有限的使用或事情变得丑陋。
这可能很有帮助https://cssgradient.io/blog/css-gradient-text/

zzlelutf

zzlelutf4#

其他答案将正确工作。但如果您不想编写任何额外的标签,请尝试以下操作:

<p style="color:#fc0;background-color:#404040;display:inline">Text Color Yellow</p> 
<p style="color:#fff;background-color:#404040;display:inline">Text Color White</p>
0g0grzrc

0g0grzrc5#

CSS可以是愚蠢的,只是使用基本的HTML

<font color="#FFFFFF">Text Color White</font>

没有愚蠢的新行额外的命令值参数。

相关问题