Сделать HTML текст двухцветным без создания новой строки

Question

Я пытаюсь создать текст 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>

Есть ли решение этой проблемы?

Answer 1

Что ж, есть несколько способов сделать это. Один из быстрых способов - использовать <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;
}

Answer 2

Обернуть белый текст в span. И затем установите его свойство цвета на белый. Это будет работать:

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

Примечание: Вам также не хватает знаков # в цветовых кодах.

Answer 3

Другой ответ будет работать правильно. Но если вы не хотите писать дополнительные теги, попробуйте следующее:

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

Answer 4

вы можете использовать для этого градиенты, но лучше иметь ограниченное использование, иначе все станет некрасиво.

это может быть полезно https://cssgradient.io/blog/css-gradient-text/