Word文字加斜线方法大全 - CSS与HTML实现技巧

什么是文字斜线？

文字斜线，通常指在文字上添加一条斜向的线，用于表示删除、修改或特殊标注。在文档编辑和网页设计中，这是一种常见的文本格式化需求。

主要用途

表示文本已被删除或废弃
文档修订和批注
价格修改（原价划掉）
特殊文本效果设计

在Microsoft Word中添加斜线

方法一：使用工具栏按钮

选中要添加斜线的文字，然后在"开始"选项卡的"字体"组中，点击"删除线"按钮（通常显示为 abc 带有一条横线）旁边的下拉箭头，选择"斜线删除线"。

方法二：通过字体设置

选中文字后，右键选择"字体"，在弹出的对话框中找到"删除线"选项，选择"斜线"，然后点击"确定"。

方法三：快捷键操作

目前Word没有为斜线删除线设置默认快捷键，但您可以通过"自定义键盘快捷键"功能为其分配快捷键。

在网页中实现文字斜线

方法一：使用CSS text-decoration属性

这是最常用的方法，通过CSS样式为文字添加删除线效果。

示例代码：

<style>
.strikethrough {
    text-decoration: line-through;
}
</style>

<p>正常文字 <span class="strikethrough">带斜线的文字</span> 继续正常文字</p>

实际效果：

正常文字带斜线的文字继续正常文字

方法二：使用HTML语义化标签

HTML提供了<del>和<s>标签来表示删除的文本。

示例代码：

<p>原价：<del>¥999</del> 现价：¥699</p>
<p>已废弃功能：<s>旧版API</s></p>

实际效果：

原价：~~¥999~~ 现价：¥699

已废弃功能：~~旧版API~~

方法三：自定义CSS斜线样式

通过CSS伪元素创建更个性化的斜线效果。

示例代码：

.custom-strike {
    position: relative;
    display: inline-block;
}

.custom-strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    borderTop: 2px solid red;
    transform: rotate(-30deg);
    pointer-events: none;
}

常见问题解答

问：斜线和删除线有什么区别？

答：通常"删除线"指水平穿过文字的线，而"斜线"指从左下到右上或左上到右下斜穿文字的线。在Word中，斜线删除线就是斜向的删除线。

问：如何去除文字上的斜线？

答：在Word中，选中带斜线的文字，再次点击删除线按钮即可去除。在网页中，移除相应的CSS样式或HTML标签即可。

问：能否改变斜线的颜色和粗细？

答：在Word中选项有限，而在网页中可以通过CSS完全自定义斜线的颜色、粗细、角度等属性。