将文本作为元素处理，如何用 CSS 隐藏？

Question

我有一个 div，内容如下：

<div class="myDiv">
Here's some text that vary in length <span class="separator">/</span> Some other text <_other elements etc>
</div>

我想要的是，只使用CSS，显示第一个文本并隐藏其余部分。

我试过 .myDiv *:not(:first-child) { display: none; } 隐藏所有元素，除了第一个分隔符。所有文本仍然可见。

这甚至可能吗，仅使用 CSS？

编辑：文本长度可变，但这种变化限制在 14 到 21 个字符之间。它永远不会被换行。（为解决方案添加了此信息，例如将 div 设置为宽度和 visibility:hidden 或类似完全可以接受的解决方案）

Answer 1

我会这样做：

<div class="myDiv"><span>Here's some text that vary in length</span>  <span class="separator">/<span><span> Some other text </span><span><_other elements etc></span>
</div>

.myDiv > span:not(:first-child) {
    display:none;
}

Here is the JSFiddle demo

使用 span 正确分隔文本，然后应用 css 隐藏 spans 如果它不是 first-child

Answer 2

已编辑你也可以使用这个

.myDiv{
 max-width: 28.5ch;
 overflow: hidden;
white-space: nowrap;
 }

或

<style>
.myDiv *:first-child
{
display:none;
}
</style>

<div class="myDiv">Here's some text that vary in length <span class="separator"> Some other text <_other elements etc></span>

Answer 3

无法使用 CSS 直接 select 文本节点，因此实现此目的的合乎逻辑的方法是将文本包装在一个元素中并将其隐藏。不幸的是，在这种情况下这不是一个选项，因为无法修改 HTML 标记并且无法使用 JavaScript。

幸运的是，我们可以依靠两件事：

文本将始终在一行上
.separator 元素将存在

因此，我们可以结合使用 .myDiv 上的 overflow 和 .separator 中的伪元素来强行隐藏不需要的文本：

将 height: 1em; 和 line-height: 1em; 添加到 .myDiv 以强制它只显示一行文本
将overflow: hidden;添加到.mDiv以确保溢出的内容被隐藏
在.separator中创建一个:after伪元素并将其设置为display: block;以确保它被强制换行。这将确保分隔符本身 (/) 仍然显示

.myDiv {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}
.separator:after {
    content:"";
    display: block;
}

<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
    <_other elements etc>
</div>

如果不需要分隔符，则可以简化 CSS。可以删除伪元素，并且可以将 .separator 本身设置为 display: block; 以强制其换行。

.myDiv {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}
.separator {
    display: block;
}

<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
    <_other elements etc>
</div>

将文本作为元素处理，如何用 CSS 隐藏？

Handle text as elements, how to hide with CSS?

html

css

elements