2017-01-12 4 views
0

Ich bin auf das folgende Problem gestoßen: Ich möchte die "..." verbergen, die innerhalb der .footer Div nach der Verbindung angezeigt werden, wie in der Abbildung unten gezeigt.Verstecken nicht gekennzeichneten Inhalt mit nur css

Nur Vorbehalt: Ich kann nur CSS verwenden, um dies zu tun.

Dev Tools Screenshot

Kann mir jemand sagen, wie dies zu erreichen, bitte?

+0

Zu helfen Sie Ihre vollständige HTML veröffentlichen sollten (in schließlich einem Schnipsel), das zeigt das Problem, kein unbrauchbares Bild :) .... wenn es nur um Text geht, dann sollte font-size –

+0

Mögliche Duplikate von [Gibt es einen CSS-Selektor für Textknoten?] (http://stackoverflow.com/ Fragen/5688712/is-there-a-css-Selektor-für-Text-Knoten) – Serlite

Antwort

2

können Sie visibility:hidden in div Eltern und visibility: visible in Kind verwenden a

div { 
 
    visibility: hidden 
 
} 
 
div a { 
 
    visibility: visible 
 
}
<div class="footer"> 
 
    <a href="#">All courses</a> 
 
    ... 
 
</div>

andere Ansatz ist font-size:0

div { 
 
    font-size: 0 
 
} 
 
div a { 
 
    font-size: initial 
 
}
<div class="footer"> 
 
    <a href="#">All courses</a> 
 
    ... 
 
</div>

+0

Danke, das hat wunderbar funktioniert! – lolcat

-1

Verwenden :not und eine Farbeigenschaft

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

Edit: jsFiddle

+0

Ich glaube nicht, dass es funktioniert, Text zu verbergen ist nicht in einem Tag eingekapselt. –

+0

Sie können eine Farbeigenschaft verwenden. Siehe mein jsFiddle –

0

Der einzige Weg, ich versteckte Inhalte innerhalb eines div denken kann, wird mit diesem obwohl es wird auch alles andere im div enthalten verstecken. Wenn dies nicht das ist, was Sie erreichen möchten, machen Sie bitte mehr.

.footer { 
     visibility: hidden; 
    } 

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

Ist das wonach Sie gesucht haben? – xfactor11

1

Von meinem Kommentar über die Verwendung von font-size:

div { 
 
    font-size: 0; 
 
    border:solid; 
 
} 
 
div * { 
 
    font-size: 1rem; 
 
    margin:0.25em; 
 
}
<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>

0

.wraper p { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 1.3em; 
 
    }
<div class="wraper"> 
 
    <a href="#">All courses</a> 
 
    <p>&nbsp;Lorem ipsum</p> 
 
</div>