CSS中如何给元素添加删除线

Question

如何在整个(div)元素上放一个大叉？

我的页面上有一个人的详细信息 - 姓名，出生日期，地址等等。如果这个人已经过世，我仍然希望显示联系信息（地址，电话号码等），但是我想在所有内容上都放一个大叉，以显示不应该使用它。

我只能想到使用图像，但由于元素的长度和宽度可能会变化，我不确定如何实现。

- user3258926

---

一个使用 background-size:cover 的图片是最容易的事情。 - Zach Saucier

这个问题可能会在用户体验上得到更好的答案，因为它更多地询问如何向表单用户传达信息，而不是如何在技术上实现这样做的方法。 - Jason Aller

@Jason Aller 感谢您提供的信息，但这是关于如何在技术上实现它，因为如何显示已经决定了。 - user3258926

请问如何使用CSS斜划线删除文本？相关问题请参考https://dev59.com/DmUq5IYBdhLWcg3wT-6D - Ciro Santilli OurBigBook.com

Answer 1

您可以在CSS中使用CSS和SVG：

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='1'/></svg>");
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 100% 100%, auto;

演示: http://jsfiddle.net/02ffvyeo/

所有这些，包括演示，都基于https://dev59.com/6GMm5IYBdhLWcg3wdeua#20231370。那个回答画了一个彩色三角形，而这个问题是关于一个十字架的。

- KajMagnus

---

很不幸，这在Internet Explorer 11中无法工作。 - Thomas

为了使其在IE中工作，请将svg放在单独的文件中，并将其设置为背景，而不是数据URI。 - Denis Petrov

很棒的例子。我没想到可以把SVG内联放在“url”里。 - Matt - Give Up Github

这应该是被接受的答案，因为它不依赖于任何固定的尺寸。 - cfx

这个答案唯一的缺点是你不能使用CSS的var()来给删除线上色。 - undefined

Answer 2

您可以使用:before和:after与转换相结合，将X覆盖整个

元素：演示

.container {
    position: relative;
    background: gray;
    padding: 30px;
    overflow: hidden; //hide overflow of pseudo elements
}

.container:before, .container:after {
    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    //center the X vertically and horizontally:
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.container:after {
    -webkit-transform: rotate(45deg);    
    transform: rotate(45deg);
}

- brouxhaha

---

我不得不将“-webkit-transform”改为“transform”，但它起作用了！谢谢。 - user3258926

请放心在transform属性上方保留-webkit-transform，以便webkit浏览器可以渲染它。我已经为此编辑了我的答案。 - brouxhaha

优雅的回答。如果您能更详细地解释一下transform属性，那就太好了。 - Nassim

Answer 3

添加一个绝对定位的 div，它具有 100% 的高度/宽度，并包含一个 em 大小的字体。用 "X" 填充它。

<div class="deceased">X</div>

会适当扩展（并保存图像回调 :)）

如果您不喜欢通过将其大小设置得非常大来剪切X，则需要使用JavaScript在div大小更改时调整其大小。

更好的方法是，您可以使用:after伪类添加它，并保存额外的div和“X”

.deceased:after
{ 
    content:"X";
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    font-size: 1000px;      // adjust this a little though it will be clipped by the div
    text-align: center;
    line-height: 100%;
    overflow: hidden;
}

或者:before会将其放置在现有内容的“下方”。

.deceased:before
{ 
    content:"X";
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    font-size: 1000px;      // adjust this a little though it will be clipped by the div
    text-align: center;
    line-height: 100%;
    overflow: hidden;
}

更新

我找到了一种仅使用 CSS 的方法...

@media all and (min-width: 50px)  {  .deceased:before  {   font-size:0.1em;  } }
@media all and (min-width: 100px) {  .deceased:before  {   font-size:0.2em;  } }
@media all and (min-width: 200px) {  .deceased:before  {   font-size:0.4em;  } }
@media all and (min-width: 300px) {  .deceased:before  {   font-size:0.6em;  } }
@media all and (min-width: 400px) {  .deceased:before  {   font-size:0.8em;  } }
and so on ....

更新2

一个包含文本的内联SVG将使文本按照div的大小进行缩放...

.deceased:before
{ 
    content: url('data:image/svg+xml;utf8,<svg>....</svg>');
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow: hidden;
}

- Asons

---

我无法让这个工作起来。第一个示例只显示一个 X，第二个示例可能存在错误，因为整个页面都被禁用了（您无法单击或选择任何内容）。 - user3258926

你需要在包含信息的内容div上设置类，并将字体设置为全尺寸以及居中文本。我已经在我的答案中更新了一个样本。 - Asons

如果它不起作用，请跳过该页面或添加HTML / CSS示例。 - Asons

抱歉，我已经有一段时间没有使用 CSS 了，并忽略了我需要将外部 div 设置为 position: relative ，这样 position:absolute 就不会影响整个页面。现在它可以工作了，但唯一的问题是 X 没有按比例伸缩。所以我可能需要使用 JavaScript 来获取容器的尺寸？ - user3258926

我不知道你可以在CSS中这样使用条件语句！它应该放在哪里？我只是把它放在我的CSS文件末尾，但当我尝试时，它似乎是基于屏幕/页面大小而不是元素。 - user3258926

Answer 4

您可以在盒子元素上使用一个class。 然后，通过该class，将交叉标志作为背景或假元素添加到其中，使用background-size或假元素的width/height和绝对定位。

无论如何，使用类将帮助您为该框制定特定样式，甚至可以是display:none或opacity:0.5;pointer-events:none;，或者您认为符合意义和网站设计的任何内容。

- G-Cyrillus

Answer 5

CSS并不是为这种情况而设计的 - div元素的目的是将html分成几个部分，以便您可以对div标签内的元素应用格式（CSS）。您可以尝试将文本格式化为带有删除线。

<p style="text-decoration: line-through">Name</p>

它仍然可读，但显然已经失效。

- user1205406

---

它必须是整个部分的横跨。如果仅使用CSS无法完成，我将不得不查看JavaScript。 - user3258926

document.getElementById("foo").style.textDecoration="line-through"; 如果你想影响大量文本区域，"foo" 可以是一个 div。 - user1205406

那只是在所有文本上划了一条线。我需要它在整个部分上打叉，而不是在单个字符上。 - user3258926

这是无效的HTML - 对于内联样式，您应该在使用花括号的地方使用引号。 - pwdst

抱歉，我在发布那条消息时没有完全注意到 - 这提醒我们应该始终测试代码。 - user1205406