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设置为宽度和可见性：隐藏或完全可接受的解决方案）

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 ，如果它不是第一个孩子

Answer 2

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

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

已修改您也可以使用

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

OR

<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>

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

3 个答案: