开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css删除线加粗

CSS 删除线加粗

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。删除线（text-decoration: line-through）是一种文本装饰，用于在文本上添加一条线，表示该文本已被删除或取消。

相关优势

样式灵活性：CSS允许开发者通过简单的样式规则来控制文本的外观。
易于维护：通过集中管理样式，可以轻松地更新和维护整个网站的样式。

类型

基本删除线：使用 text-decoration: line-through; 实现。
加粗删除线：结合 font-weight: bold; 和 text-decoration: line-through; 实现。

应用场景

标记删除内容：在编辑器或文档中标记已删除的内容。
价格折扣：显示原价和折扣价的对比，原价使用删除线。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 删除线加粗示例</title>
    <style>
        .deleted-text {
            font-weight: bold; /* 加粗 */
            text-decoration: line-through; /* 删除线 */
        }
    </style>
</head>
<body>
    <p>原价: <span class="deleted-text">¥100</span></p>
    <p>现价: ¥80</p>
</body>
</html>

参考链接

遇到的问题及解决方法

问题：删除线加粗后，文本显示不正常。原因：可能是由于浏览器兼容性问题或样式冲突。 解决方法：

检查浏览器兼容性：确保使用的浏览器支持 text-decoration 和 font-weight 属性。
避免样式冲突：确保没有其他CSS规则覆盖了这些样式。
使用浏览器前缀：对于一些旧版本的浏览器，可能需要添加前缀来确保兼容性。

.deleted-text {
    font-weight: bold;
    text-decoration: line-through;
    -webkit-text-decoration: line-through; /* Safari 和 Chrome */
    -moz-text-decoration: line-through; /* Firefox */
}

通过以上方法，可以确保在不同浏览器中都能正确显示加粗的删除线。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 删除线：在 CSS 中使用文本装饰和划线

图片CSS 删除线是一个 CSS 属性，它使文本看起来像是被删除线一样，就像这样。在网络开发和写作中，这经常用于表示文本已被删除或不再相关。但它也可以用于不同的事情。...删除线可以应用于 span 元素、段落、div、显示内联块或任何其他需要文本修饰的元素。除了下划线、斜体和粗体，CSS 删除线也是通过 HTML 元素传达信息的好方法。...什么是 CSS 删除线？CSS 删除线实际上是指“文本装饰：划线”。但它可以称为罢工，因为它的 HTML 版本是罢工。line-through 是一种文本装饰，它在文本中添加一条线以将其取消。...如何使用删除线 HTML 标记？HTML 删除线标记用于表示已删除的文本。它看起来像这样：罢工！这样做比使用 CSS 删除文本更容易。...如果你想从你的文本中删除 CSS 删除线，你可以为 text-decoration 属性使用 none 值。这将从您的文本中删除任何删除线。你能在 CSS 中使用多个文本装饰吗？

1.6K0 0

Excel 增加删除线

Excel 增加删除线操作如下： 2. 选中删除线即增加删除线，去掉删除线即删除删除线，颜色可以定义成红色之类。

8733 0

给UILabel添加删除线

let attributedText = NSAttributedString(string: "道之不存,师之所存也", attrib...

1.1K5 0

【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

文章目录一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) 二、标签属性三、图像标签 HTML 常用的标签有如下类型 : 排版标签文本格式化标签 ★ 图像标签 ★ 链接标签 ,...其中链接涉及到相对路径与绝对路径问题 ; 一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) ---- 文本格式化标签 : 对文字设置粗体 , 斜体 , 下划线 , 删除线... 下划线效果 : 下面两种标签都能实现下划线效果 , 在 XHTML 中推荐使用标签 ; 删除线效果...: 下面两种标签都能实现删除效果 , 在 XHTML 中推荐使用标签 ; XHTML 是可扩展超文本标记语言 , 英文全称...height 属性 : 属性值是像素数值 , 作用是设置图像的像素高度 ; 宽度和高度设置任意一个 , 另外一个可以等比例缩放 ; border 属性 : 作用是设置图像的边框宽度度 , 一般都使用 css

3K2 0

Excel-筛选带删除线的数据并删除

今天同事使用 Excel 的时候遇到一个需求，有些内容不在需要时会被标记删除线，后面再删除，但是由于数据比较多，不方便一个个删除，有没有什么办法能删除标记了删除线的内容所在的行呢？...（这里有个疑问：删除线为什么不能删除？）网上搜索一番，Excel 确实没用直接的功能支持这种操作，大伙推荐使用 VBA 宏筛选，但是操作有些复杂，不便于向不懂代码的人传达。...1、替换删除线 Ctrl+H 快捷键呼出替换框依次点击选项->格式->字体->勾选删除线这样就可以搜索带删除线的内容并替换成指定内容，这里替换成空行。...筛选到所有带删除线的内容：替换为空或其他特定内容（便于筛选即可）： 2、筛选空行并删除完工！office 办公软件技巧还真多，后续遇到会继续分享~

4311 0

css画div对角线

最近想实现带对角线的表头, 所以就使用css的background的linear-gradient来画实验先画个正方形 [image.png] .block { width...: 200px; height: 200px; } 画对角线使用线性渐变, 因为是正方形, 所以是...fff000 50.5%, transparent 50.5%); } [image.png] 代码链接 https://codepen.io/klren0312/full/zYqPVXZ 表格对角线

6.4K0 0

HTML 下划线与删除线

--下面是下划线的用法--> 这里显示的内容是下划线二、删除线标签下划线删除线的用法--> 这里显示的内容是删除线发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136025

1.9K2 0

ios 富文本加颜色删除线

[attributeStr addAttribute:NSForegroundColorAttributeName value:RGBlightGrayColor range:range1]; //删除线

1.1K4 0

dotnet OpenXML 文本删除线解析方法

本文来告诉大家如何解析读取在 OpenXML 里面存放的文本删除线，本文使用 PowerPoint 作为例子来告诉大家如何读取然后在 WPF 应用里面显示在开始之前，期望大家已了解如何在 dotnet...C# dotnet 使用 OpenXml 解析 PPT 文件期望在阅读本文之前，先阅读 dotnet OpenXML 简单聊聊 PPT 文本解析以下是本文效果在 OpenXML 文档，将文本的删除线放在了文本的...和 WPF 的设计不同的是，在 WPF 里面，无论是下划线还是删除线等，都是属于文本装饰。但是在 PPT 里面，下划线是下划线，而删除线是删除线。...同时下划线和删除线的样式也是特别多的如删除线的 TextStrikeValues 的枚举，在 ECMA 376 的第 20.1.10.78 章可以了解到有单线条的删除线和双线条的删除线，在 OpenXML...(); // 读取段落的文本 var run = paragraph.GetFirstChild(); // 读取删除线

9011 0

CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

需求背景 - 文字的二次加粗今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？...看下面的 DEMO，我们可以利用 -webkit-text-stroke，给文字二次加粗：文字加粗CSS 文字加粗CSS 文字加粗CSS 文字加粗CSS...当然，这也难不倒强大的 CSS（SVG），让我们来尝试下。尝试方法一：使用文字的伪元素放大文字第一种尝试方法，有点麻烦。...我们可以给二次加粗的文字添加一个文字阴影：文字加粗CSS p { font-size: 48px; letter-spacing: 6px; font-weight...直接上代码：文字加粗CSS <feMorphology in="

1.4K3 0

CSS3动画-抛物线运动

今天来说下CSS3动画，目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation，transform，@keyframes，transition等。...DOCTYPE html> css" href="animation.css"/> CSS文件，animation.css: .item { width:50px; height: 50px; display: inline-block; position:...首先这种做法并不是抛物线，只是几段线段拼在一起，如果把百分比做的细一点，可以类似于抛物线，但是大大加大了coding的时间，而且只是在模拟抛物线，还不如使用抛物线的公式，通过javascript去计算每个点的坐标...就像做抛物线，不能只是模拟运动轨迹，而更应该理解抛物线运动的实质。还有，不禁要感叹一句，CSS3还真是博大精深啊。

1.7K7 0

JS动态添加删除css文件

("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", file...) } // 使用，file是css文件路径 loadStyles('..../test.css') 2、动态添加css文件，jq写法 function addStyle(file){ $('head').append('css">') } 3、动态删除css文件 function removeStyles (file) { var filename = file.../test.css')

6392 0

第17天：CSS引入、选择器优先级（中级）

一、CSS 位置 1、行内式 css aa 2、内嵌式样式 .one...{ width: 200px; } 3、外链式 css/base.css” /> 二、Font...字体综合写 Font: 字体加粗字号/行高字体; 必须有字号和字体。...Font-weight:bold; 700 S del 删除线 I em 倾斜 U ins 下划线字体加粗 font-weight: 700; ...让字体不加粗: font-weight:normal; 字体倾斜: font-style:italic; 不用字体不倾斜： font-style:normal; 不下划线不删除线:

4683 0

【CSS】510- CSS实现自适应分隔线的N种方法

分隔线（伪元素+transform） 2.伪元素+flex 这个比较好理解了，设置display:flex，然后两个伪元素分别铺满剩余空间。...分隔线（伪元素+flex） 3.伪元素+box-shadow/outline+clip-path 同样利用text-align: center使文本和伪元素居中，然后生成足够大的box-shadow或者...分隔线（border+transform） 6.伪元素+border+left/right 这个思路只需要一个伪元素，在文本内部生成一个伪元素，利用足够大的border和相同的负值（绝对定位+left...分隔线（伪元素+table-cell） 8.fieldset+legend 利用fieldset和legend标签组合，可以天然实现分隔线效果，参考至张鑫旭的这篇文章具体实现如下 html结构为线（fieldset+legend）小结上面一共列举了8中方式来实现分隔线的效果，每种方法思路各不相同，重要的是可以发散自己的想象力，可能这才是CSS与其他语言所不同的吧~ 这里整理了一下，整体效果如下非大家在实际项目中可自行选取所需要的方式

7721 0

CSS 基础之基础选择器+字体文本相关样式

——>bold纯数字：100~900的整百数：正常——>400 加粗 ——>700 注意点不是所有字体都提供了九种粗细，因此部分取值页面中无变化实际开发中以：正常、加粗两种取值使用最多。...关键字：正常——>normal 加粗 ——>bold 纯数字：100~900的整百数：正常——>400 加粗 ——>700 注意点不是所有字体都提供了九种粗细，因此部分取值页面中无变化实际开发中以...：正常、加粗两种取值使用最多。...文本；2. span标签、a标签，3. input标签、img标签 5.3 文本修饰属性名 text-decoration 取值： underline 下划线line-through 删除线overline...上划线none 无装饰线注意点开发中会使用 text-decoration : none ; 清除a标签默认的下划线 underline 下划线 line-through 删除线 overline

2.1K1 0

一、前端基础-html-body基本标签

-- div 1、div标签默认没有任何属性 2、div标签可以定义各种属性 3、div标签可以和css配合使用 4、div标签前后会自动换行 --> div标签前后会自动换行这是div标签...-- 在div中嵌入css样式给字体添加颜色 --> 这是div标签线标签： --> --> 这是换行标签这是换行标签加粗 --> 字体加粗删除线 --> 删除线这是下角标 23 这是上角标 23 <!

8943 0

js遍历添加栏目类添加css，再点击其它删除css

很多网页设计都可能会用到js遍历去增加css类别，这篇文章主要介绍了js遍历添加栏目类添加cs，再点击其它删除css的实例代码，非常不错，具有一定的参考借鉴借鉴价值，原作者是谁已无从知晓，但是代码是有效的...具体代码如下： //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).click...{ $(".peoples").hide(); $(".peoples").removeClass("allhide") } }); 以上所述就是给大家介绍的js遍历添加栏目类添加css...，再点击其它删除css的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言！

3.8K2 0

Fabric.js 上划线、中划线（删除线）、下划线🎭

在 HTML 也好，Word 也好，基本都有下划线和删除线（中划线）。 Fabric.js 作为一个老牌 canvas 库，当然也提供中划线和下划线的配置啦，除此之外还提供了上划线的配置。...\n\n\n 本文要讲解的就是这3种装饰线在 fabric.js 中的使用方法。除了初始化配置外，还支持项目运行时，让用户动态配置。本文案例使用了 IText ，该组件支持编辑功能。

2.6K2 0

前端中那些让你头疼的英文单词

常用的标签 script JavaScript常用的标签 color 颜色 font-size 字号 font-family 字体“汉字记得加引号” font-weight 加粗 font-style...倾斜 text-decoration 文字修饰线 underline下划线 overline 顶部线 line-through 删除线 line-height 行高 text-indent 首行缩进（后面如果是两个字符的话写...submit提交，button普通的按钮，reset重置（工作中一般不用）） select 选择菜单（下拉菜单功能嵌套option使用） table 表格（tr行 td单元格 th表头）普通语义： b加粗...i倾斜 u下划线 s删除线强调语义： strong 加粗 em倾斜 ins下划线 del删除线下面这些都有上下左右四个属性： border 边框 padding 内边距 margin 外边距 overflow...控制css属性的函数 siblings 同级的 parent 父级的 children 子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate

2.3K2 0

HTML详解

-- html注释 --> /* css 注释 */ // 单行注释 /* 多行注释*/ h1 标签啊每个页面只能使用一次用来放网页的logo 加粗倾斜下划线删除线加粗 em ins del 列表有序列表(ol) 无序列表(ul)...*/ outline: none; 盒子模型 /* 加padding能撑大盒子 -- 盒子尺寸计算公式： border + padding + width/height */ /* css3.0...*/ font-weight:bold; /* 倾斜*/ font-style:italic /*文字修饰线*/ text-decoration: underline; /* 首行缩进*/ text-indent

6632 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭