跨度元素中的文本溢出不切割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外元素宽度

回答

相关问题