这是我的尝试(见这里):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
本质上,当窗口变小时,我希望空间用省略号缩小。我做错了什么?
这是我的尝试(见这里):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
本质上,当窗口变小时,我希望空间用省略号缩小。我做错了什么?
当前回答
我有一个问题与省略下铬。打开空白:nowrap似乎解决了这个问题。
max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;
其他回答
你可以尝试在CSS中添加以下省略号:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
但这段代码似乎只适用于单行修剪。更多修剪文本和显示省略号的方法可以在这个网站上找到:http://blog.sanuker.com/?p=631
word-wrap: break-word;
这个,只有这个对我有用 对于一个
<pre> </pre>
tag
其他一切都没有做到省略号....
无固定宽度
对于我们这些不想使用固定宽度的人来说,它也可以使用display: inline-grid。因此,除了必需的属性,还需要添加显示
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-grid;
}
确保你有一个块元素,一个最大大小,并将overflow设置为hidden。(在IE9和FF 7测试)
http://jsfiddle.net/uh9zD/
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
}
你需要CSS溢出,宽度(或max-width),显示和空白。
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
身体{ 溢出:隐藏; } 跨度{ 边框:纯蓝色2px; 空白:nowrap;} 文本溢出:省略; 宽度:100 px; 显示:块; 隐藏溢出: } <span>Test Test Test Test Test </span>
齿顶高 如果你想了解行夹紧(Multiline Overflow Ellipses)技术的概述,请查看CSS-Tricks页面:https://css-tricks.com/line-clampin/
附录2(2019年5月) 正如这个链接所声称的,Firefox 68将支持-webkit-line-clamp (!)