Wie CSS-Stil decandant Spanne zu verstecken, wenn Eltern div Text-Überlauf hat: Auslassungs

Ich habe eine Spanne mit einem anderen background-color die span obwohl die Eltern gezeigt wird, hat eine text-overflow : ellipsis:Wie CSS-Stil decandant Spanne zu verstecken, wenn Eltern div Text-Überlauf hat: Auslassungs

.container { 
 
    border  : 1px solid black; 
 
    max-width  : 100px; 
 
    overflow  : hidden; 
 
    text-overflow : ellipsis; 
 
    white-space : nowrap; 
 
} 
 

 
.backgroundColor { 
 
    background-color : green; 
 
}

<div class="container"> 
 
    Lorem ipsum 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div>

Ich möchte nicht den grünen Hintergrund der Dekadenz sehen span ... Jetzt frage ich mich, wie kann ich solches Verhalten verhindern e. G. mein Ziel erreichen?

Quelle

2016-11-07 Beat

Die 'background-color' Eigenschaft entfernen? Ich bin mir nicht sicher, was Sie erreichen wollen. –

Bytw, Text-Overflow ist für Text gedacht :) die Spannweite, die in den Weg kommt, ist keine große Überraschung irgendwie. –

Ja, das war mir irgendwie bewusst. Aber ich war ein wenig verunsichert, weil ich in Stack Overflow nichts Ähnliches über mein Problem gefunden habe ... – Beat

Ihr Problem ist, dass max-width zu groß ist. Außerdem sollten Sie relative Länge verwenden, um etwas mit Ihrem Text skalierbar zu machen. Hier ist das Ergebnis mit 5em:

.container { 
 
    border  : 1px solid black; 
 
    max-width  : 5em; 
 
    overflow  : hidden; 
 
    text-overflow : ellipsis; 
 
    white-space : nowrap; 
 
} 
 

 
.backgroundColor { 
 
    background-color : green; 
 
}

<div class="container"> 
 
    Lorem ipsum 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div>

Wenn Sie HTML ändern können, was Sie versuchen, Blicke erzielen wie die Tags details/summary:

details { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    background-color: green; 
 
} 
 

 
summary { 
 
    display: inline-block; 
 
    background-color: white; 
 
} 
 

 
summary:after { 
 
    content: " ..."; 
 
}

<details> 
 
    <summary>Lorem ipsum</summary> 
 
    should not be visible 
 
</details>

Quelle

2016-11-07 15:01:39 wasthishelpful

Ihr Schnipsel funktioniert nicht mit einem anderen String, versuchen Sie "Lorem ips" zum Beispiel –

@YuriGor ersten oder zweiten? – wasthishelpful

können Sie zurücksetzen display von span um inline-block so verhält es sich wie ein einzelner Block/Box/Charakter. Ich werde nicht versuchen, auf ein paar Zeilen zu spannen und werde so lange versteckt sein, wie es nicht genug Platz hat.

.container { 
 
    border: 1px solid black; 
 
    max-width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.backgroundColor { 
 
    background-color: green; 
 
    display:inline-block 
 
} 
 
.aa { 
 
    
 
    max-width: 200px; 
 
    } 
 
.bb { 
 
    
 
    max-width: 240px; 
 
    }

<div class="container"> 
 
    Lorem ipsum 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div> 
 
<div class="container aa"> 
 
    Lorem ipsum 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div> 
 
<div class="container bb"> 
 
    Lorem ipsum 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div>

Quelle

2016-11-07 15:03:26

Ich weiß nicht, den Zweck dieser Spanne, so dass ich bin nicht sicher, ist es akzeptabel, für Sie einige linken Rand, um es hinzuzufügen, schau mal hier:

.container { 
 
    border  : 1px solid black; 
 
    max-width  : 100px; 
 
    overflow  : hidden; 
 
    text-overflow : ellipsis; 
 
    white-space : nowrap; 
 
} 
 

 
.backgroundColor { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    background-color : green; 
 
}

<div class="container"> 
 
    Lorem ipsumm 
 
    <span class="backgroundColor">should not be visible</span> 
 
</div>

Quelle

2016-11-07 15:15:12

Wie CSS-Stil decandant Spanne zu verstecken, wenn Eltern div Text-Überlauf hat: Auslassungs

Antwort

Verwandte Themen