如何隱藏decandant跨度的CSS樣式時，父div有文本溢出：省略號

我有一個不同的background-color跨度其中顯示，儘管父span有text-overflow : ellipsis：如何隱藏decandant跨度的CSS樣式時，父div有文本溢出：省略號

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

我不想看到頹廢的綠色背景span ......現在我想知道，我該如何防止這種行爲e。 G。實現我的目標？

來源

2016-11-07 Beat

刪除'background-color'屬性？我不確定你想要完成什麼。 –

bytw，文本溢出是爲了文字:)來自這種方式的跨度不是一個大驚喜莫名其妙。 –

是的，我以某種方式意識到這一點。但我有點不安，因爲我發現堆棧溢出沒有類似的問題... – Beat

您的問題是max-width太大。此外，你應該使用相對長度來使文本具有可擴展性。這裏是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>

如果你可以修改HTML，你想要什麼來實現的樣子標籤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>

來源

2016-11-07 15:01:39 wasthishelpful

你的代碼段不能用另一個字符串，例如嘗試「Lorem ips」 –

@YuriGor第一個或第二個？ – wasthishelpful

您可以重置display範圍爲inline-block，因此它表現爲單個塊/箱/ caracter。我不會嘗試跨越幾行，只要沒有足夠的空間就會隱藏起來。

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

來源

2016-11-07 15:03:26

我不知道，跨度爲目的，所以我不知道是可以接受的，你一定左邊空白處添加到它，看這裏：

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

來源

2016-11-07 15:15:12

如何隱藏decandant跨度的CSS樣式時，父div有文本溢出：省略號

回答

相關問題