This is what I tried (see here):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
Essentially, I want the span to shrink with ellipsis when the window is made small. What did I do wrong?
Best Answer
You need to have CSS
overflow
,width
(ormax-width
),display
, andwhite-space
.http://jsfiddle.net/HerrSerker/kaJ3L/1/
Addendum If you want an overview of techniques to do line clamping (Multiline Overflow Ellipses), look at this CSS-Tricks page: https://css-tricks.com/line-clampin/
Addendum2 (May 2019)
As this link claims, Firefox 68 will support
-webkit-line-clamp
(!)