仅使用css隐藏未标记的内容

Question

我遇到了以下问题：我希望隐藏链接后.footer div中显示的“...”，如下图所示。

只有警告：我只能使用CSS来执行此操作。

有人可以告诉我如何实现这个目标吗？

Answer 1

您可以使用visibility:hidden父div和visibility: visible a <{1}}

div {
  visibility: hidden
}
div a {
  visibility: visible
}

<div class="footer">
  <a href="#">All courses</a>
  ...
</div>

其他方法是font-size:0

div {
  font-size: 0
}
div a {
  font-size: initial
}

<div class="footer">
  <a href="#">All courses</a>
  ...
</div>

Answer 2

根据我对font-size使用

的评论

＆＃13;

＆＃13;

div {
  font-size: 0;
  border:solid;
}
div * {
  font-size: 1rem;
  margin:0.25em;
}

＆＃13;

<div><a href="#">link to see</a> "text to hide "<a href="#">link to see</a>
  <p>some more text here</p>
   "Also some text to hide "
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我能想到隐藏div中内容的唯一方法就是使用它，尽管它也会隐藏div中包含的所有内容。如果这不是您希望实现的目标，请详细说明。

    .footer {
        visibility: hidden;
    }

    <div class="footer">
    "..."
    </div>

Answer 4

＆＃13;

＆＃13;

.wraper p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 1.3em;
  }

＆＃13;

<div class="wraper">
  <a href="#">All courses</a>
  <p>&nbsp;Lorem ipsum</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用:not和颜色属性

.footer:not(a){
  color:rgba(0,0,0,0);
}

修改：jsFiddle