跨度元素中的文本溢出不切割texta外元素寬度

我試圖使3跨度裏面的中間人應該「壓縮」，即剪切多餘的文本時，div的大小是小。跨度元素中的文本溢出不切割texta外元素寬度

我在尋找的結果是

A Very lon... A 
     ^here it should get cut with "text-overflow: ellipsis;"

不知何故，text-overflow: ellipsis;沒有被應用到跨度。

任何想法我失蹤？

與width,display,overflow一起嘗試，似乎沒有任何工作...測試了Chrome和Firefox。

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
#long-text { 
 
    width: 20px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

來源

2017-06-06 Rikard

您跨度上應用CSS裏面。但你必須appy在div ,,所以它的工作,,,,檢查我的代碼..對於答.. –

span是內嵌元素。它沒有寬度或height.so嘗試display:inline-block爲span element.Then的text-overflow: ellipsis;將工作

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    display:inline-block; 
 
} 
 

 
#long-text { 
 
    width: 50px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

來源

2017-06-06 08:33:08 XYZ

好吧，我明白了。省略號中的「...」在哪裏切割文本？ – Rikard

@Rikard增加span的寬度。請檢查片段 – XYZ

@XYZ其不正確的方式來增加跨度寬度...您必須將CSS應用於文本不會溢出div ..邊框。 –

你所缺的是讓跨度塊顯示

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
#long-text { 
 
    width: 20px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

來源

2017-06-06 08:35:51 Kejt

as XYZ表示span是一個內聯元素。並且您需要根據所需的效果將其顯示屬性更改爲阻止或內聯塊。在你的情況下，它將是

#long-text{ 
display: inline-block 
width: 35px; 
}

來源

2017-06-06 08:39:29 Necvetanov

-1

更改您的填充邊距。

邊距給你的對象外的空間，而填充給你空間裏面。文本溢出不會考慮外，如果它仍然是填充

來源

2017-06-06 08:45:27 perseusl

div { 
 
border-radius: 5px; 
 
border: 1px solid #000000; 
 
width: 100px; 
 
text-overflow: ellipsis; 
 
display: block; 
 
overflow: hidden; 
 
padding: 10px 20px; 
 
} 
 

 
span { 
 

 
text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
    
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here......</span> 
 
    <span>A</span> 
 
</div>

來源

2017-06-06 09:00:23

跨度元素中的文本溢出不切割texta外元素寬度

回答

相關問題