Html 包装器内两个跨度之一上的文本溢出省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8122042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-overflow ellipsis on one of two spans inside a wrapper
提问by funkyfly
I am having a problem with ellipsis. Here is my HTML:
我有省略号的问题。这是我的 HTML：
<div id="wrapper">
<span id="firstText">This text should be effected by ellipsis</span>
<span id="lastText">this text should not change size</span>
</div>
Is there a way to do this with pure css? Here is what I have tried:
有没有办法用纯 css 做到这一点？这是我尝试过的：
#firstText
{
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#lastText
{
white-space:nowrap;
overflow:visible;
}
This is how it is shown:
这是它的显示方式：
This text should be effected by ellipsis this text shoul
此文本应受省略号影响此文本应
While this is the result I want:
虽然这是我想要的结果：
This text should be e...this text should not change size
此文本应为 e...此文本不应更改大小
回答by sandeep
You can give widthto your #firstTextlike this :
你可以给width你#firstText这样的：
#firstText
{
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:150px;
display:inline-block;
}
Check this example
检查这个例子
http://jsfiddle.net/Qhdaz/5/
http://jsfiddle.net/Qhdaz/5/
回答by Michiel
You could achieve this by changing the order of your spans and give the first span a float right. That way you don't have to set a width to any of your elements:
您可以通过更改跨度的顺序并为第一个跨度赋予浮动权来实现此目的。这样您就不必为任何元素设置宽度：
#firstText
{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#lastText
{
float:right;
white-space:nowrap;
}<div id="wrapper">
<span id="lastText">this text should not change size</span>
<span id="firstText">This text should be effected by ellipsis</span>
</div>回答by Freezystem
There's still a little case not handled:
还有一个小case没有处理：
When you have an unknown or a dynamic wrapper size and you want the first child to take all available space but ellipsis if it's still too long.
当您有一个未知的或动态的包装器大小并且您希望第一个孩子占用所有可用空间但如果它仍然太长则省略号。
Here is my solution using flexCSS properties :
这是我使用flexCSS 属性的解决方案：
#wrapper{
display: inline-flex;
flex-flow:row nowrap;
max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
flex:1;
white-space:pre;
overflow: hidden;
text-overflow: ellipsis;
}
#lastText{
white-space:nowrap;
}
回答by Jarno Argillander
You could fake it like this: change your spanto divand change your CSS:
你可以像这样伪造它：改变你span的div和改变你的CSS：
#firstText
{
float: left;
width: 250px;
height: 20px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#lastText
{
float: left;
white-space:nowrap;
overflow:visible;
}
