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

【问题标题】：Add border around word without changing formatting ? HTML在不更改格式的情况下在单词周围添加边框？ HTML
【发布时间】：2020-04-30 16:29:24
【问题描述】：

我正在尝试在 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 应用程序中，这就是它的外观，有什么方法可以填充空白区域使其完全变黄？ Outlook app image

【问题讨论】：

检查我的答案 - 它接近你想要的
是的，就是这样。我只是不知道如何保持格式，它一直在变化。谢谢！我会将您的答案标记为正确，我只是在等待删除我的个人电子邮件（忘记删除它）。再次感谢！
已删除您的个人电子邮件地址，请检查
谢谢@abhijat_saxena，我还有一个问题，你能看看我上传的照片吗？黄色部分未填满 Windows 上 Outlook 应用程序中的整个边框。有什么建议吗？
我认为这是因为添加了 2px 填充我已经编辑了我的解决方案 - 你可以再试一次吗？

标签： html outlook outlook-web-app

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：