html-隐藏元素,但显示CSS生成的内容

是否可以隐藏元素的内容,但保持其text-indent: -....px的内容可见?说我有以下代码:

HTML:

<span class="addbefore hidetext">You are here</span>

CSS:

.addbefore:before {
    content: "Show this";
}
.hidetext {
    // What do I do here to hide the content without hiding the :before content?
}

我试过了:

  • 使用text-indent: -....px并在:before上设置display: inline,但两者仍处于隐藏状态
  • 使用text-indent: -....px ;,但随后似乎增加了额外的空间(?)
  • 使用颜色:透明;但是,当然,跨度的内容仍会占用空间
  • 使用text-indent: -....px,但
    1. 这被搜索引擎和
    2. 似乎不适用于span元素(?)

关于如何执行此操作还有其他想法吗?

Jon Gjengset asked 2019-10-08T16:31:47Z
5个解决方案
90 votes

清洁溶液

您可以使用rem,但是使用此解决方案,隐藏的内容仍然会占用空间。 如果这对您而言无关紧要,请按照以下步骤进行:

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

骇人的替代解决方案

另一个解决方案是设置跨度的rem归零*的价值很小。 这种方法的优点:隐藏的内容不会占用任何空间。 缺点::before内容的字体大小将无法使用em或%之类的相对单位。

span:before {
    content: "Lorem ";
    font-size: 16px;
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */
    letter-spacing: normal;
    color: #000;
}

span {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
}

jsfiddle上的示例。

更新(2015年5月4日):使用CSS3,您现在可以使用rem(Root EM)单元维护:before元素中的相对字体大小。 (浏览器支持。)


*此帖子的先前版本建议将字体大小设置为零。 但是,这在某些浏览器中无法正常工作,因为CSS并未定义将font-size设置为零时的预期行为。 为了实现跨浏览器的兼容性,请使用上述较小的字体。

anroesti answered 2019-10-08T16:33:08Z
9 votes

为了获得更好的浏览器支持:

将应隐藏的文本包装在其他font-size元素中,然后将类应用于该跨度以隐藏您希望隐藏的文本。

HTML:

<span class="addbefore">
  <span class="visuallyhidden>This text will not show.</span>
</span>

CSS:

.addbefore:before {
  content: "Show this";
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

上面使用的font-size类来自当前版本的HTML5 Boilerplate:[https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css]

该解决方案的优点:

  • 语义HTML
  • 完整的浏览器支持
  • 像其他小型font-size解决方案一样,微小文本也没有问题。
  • 隐藏的内容不会占用空间

在此处查看其运行情况:[http://jsfiddle.net/tinystride/A9SSb/]

tinystride answered 2019-10-08T16:34:33Z
1 votes

如果您需要在字体大小和颜色方面应用未知的上下文,这是基于@anroesti的出色技巧,这是一个解决方案,即您不确定是否重置为color:black;font-size:1rem;不会使事情变得混乱:

<span abbrev-content="Intl.">International</span>

@media only screen and (max-width: 700px) {  /* very narrow viewports */
    span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
    span[abbrev-content]::before { 
        content: attr(abbrev-content); 
        font-size: 1000em; 
        visibility: visible; 
    }
}

如果您的跨度内容是一个段落而不只是一个单词,那么您可能还需要否定的字母间距。

EoghanM answered 2019-10-08T16:35:07Z
0 votes

我采用了与此处建议的类似的方法font-size,但是仍然有一个内容框。

我的解决方案是只使用font-size隐藏目标文本。

span {
    font-size: 0;
}

span:before {
    font-size: 16px;
}
Brenden answered 2019-10-08T16:35:42Z
-2 votes

我认为纯CSS和html是不可能的。 查看此示例[http://jsbin.com/efeco4],您将看到css的div内部的内容由元素包装。 因此,对该元素的任何操作都会影响css hidetext

因此,另一种选择可能是使用jquery来清空标签div中带有类hidetext的html内容,而不影响css的content。 示例代码可能是这样的:

$('.hidetext').empty();

示例:[http://jsbin.com/efeco4/2]

Sotiris answered 2019-10-08T16:36:29Z
translate from https://stackoverflow.com:/questions/4912765/hide-element-but-show-css-generated-content