Добавить рамку вокруг слова без изменения форматирования? HTML

Question

Я пытаюсь добавить границу вокруг ВНИМАНИЕ. Однако всякий раз, когда я его использую, форматирование всего текста меняется, и это выходит из контекста. Это оригинальный текст

<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 10.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;">ATTENTION: This email came from an external source. This email came from an external source This email came from an external source.&nbsp;This email came from an external source <a href="mailto:aaaa">example@example.com</a></span></p>
<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 14.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;"><span style="mso-spacerun: yes;">&nbsp;</span></span></p>

Я бы хотел, чтобы ВНИМАНИЕ выглядело так, не меняя форматирование остальной части текста, есть ли способ сделать это?

<table border="2" style="height: 10px; width: 13.3803%; border-collapse: collapse; border-style: solid; border-color: black; background-color: yellow;" height="10">
<tbody>
<tr>
<td style="width: 100%;">ATTENTION:</td>
</tr>
</tbody>
</table>

Привет, ребята, поэтому @abhijat_saxena стоит на месте, но в приложении Outlook на windows это выглядит так, в любом случае, чтобы заполнить пустое пространство, чтобы оно было полностью желтым ? Изображение приложения Outlook

Answer 1

<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 10.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;"><span style="border:1px solid #000; padding:2px">ATTENTION:</span> This email came from an external source. This email came from an external source This email came from an external source.&nbsp;This email came from an external source <a href="mailto:a">example@example.com</a></span></p>
<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 14.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;"><span style="mso-spacerun: yes;">&nbsp;</span></span></p>

Answer 2

Ваш стиль применяется ко всему тексту, чтобы сохранить стиль для определенных c областей - используйте теги span

<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 10.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;"><span style="border:1px solid #000; background-color: yellow;">ATTENTION:</span> This email came from an external source. This email came from an external source This email came from an external source.&nbsp;This email came from an external source <a href="mailto:">example@example.com</a></span></p>
<p style="margin: 0in; margin-bottom: .0001pt; text-align: center; line-height: 14.0pt; background: white;" align="center"><span style="font-size: 14.0pt; font-family: 'MarkOT-HeavyItalic',sans-serif; mso-bidi-font-family: Calibri; color: red; mso-bidi-font-style: italic;"><span style="mso-spacerun: yes;">&nbsp;</span></span></p>

Answer 3

Оберните текст «Внимание» в span, а затем отформатируйте его в виде css встроенного файла на ваш выбор.

.attention{
background: yellow;
border: 2px solid #000;
}

<table style="height: 10px; width: 13.3803%; border-collapse: collapse;" height="10">
<tbody>
<tr>
<td style="width: 100%;"><span class="attention">ATTENTION:</span></td>
</tr>
</tbody>
</table>