在不更改格式的情况下在单词周围添加边框？ HTML

Question

我正在尝试在 ATTENTION 周围添加边框。但是，每当我使用它时，整个文本的格式都会发生变化并且脱离上下文。这是原文

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

我希望 ATTENTION 看起来像这样而不改变其余文本的格式，有什么方法可以做到这一点吗？

<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 说的很对，但是在 windows 上的 outlook 应用程序中是这样的，任何填充白色的方法 space 所以它完全是黄色的？ Outlook app image

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

将 Attention 文本包装到 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>

Answer 3

您的样式应用于整个文本，以保持特定区域的样式 - 使用 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>

在不更改格式的情况下在单词周围添加边框？ HTML

Add border around word without changing formatting ? HTML

html

outlook

outlook-web-app