Html CSS - 最大宽度和椭圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2966326/
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
CSS - Max Width and Ellipses
提问by Steve
I have a span that will contain text. I would like the span to expand to a maximum of 500px to accommodate the text inside. After the max is reached I would like the text to display ellipses for any text overflowing the max-width. Is this possible? I tried the following, but this did not do the trick.
我有一个包含文本的跨度。我希望跨度扩展到最大 500px 以容纳里面的文本。达到最大值后，我希望文本显示超出最大宽度的任何文本的省略号。这可能吗？我尝试了以下方法，但这并没有奏效。
Thanks
谢谢
{
position: absolute;
top: 13px;
left: 44px;
max-width: 500px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
回答by Dan M
Spans are display:inline by default, which can cause odd behavior when dimensions are assigned to it. If it's being positioned absolutely anyway, you should use a div or set the span to display:block instead.
默认情况下，跨度是 display:inline，当为其分配维度时，这可能会导致奇怪的行为。如果它被绝对定位，则应使用 div 或将 span 设置为 display:block 。
I'm not sure if this will fix your problem, but it's a start :)
我不确定这是否能解决您的问题，但这是一个开始:)
This is an interesting articleabout getting ellipsis to work on all modern browsers without using javascript.
回答by Kyle
This javascript will truncate your text and add an ellipsis. (Without breaking it in the middle of a word or markup)
此 javascript 将截断您的文本并添加省略号。（不要在单词或标记中间打断它）
Not sure on the browser compatibility of i, but it should work :)
不确定 i 的浏览器兼容性，但它应该可以工作:)
Hope it helps.
希望能帮助到你。
