-
1. Re: Truncating text instead of wrapping it...
kennethkawamoto2 Mar 1, 2013 10:30 AM (in response to jyeager11)Try CSS text-overflow .
Example:
div {
width: 100px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
--
Kenneth Kawamoto
-
2. Re: Truncating text instead of wrapping it...
Sudarshan Thiagarajan Mar 1, 2013 10:58 PM (in response to jyeager11)To add to Kenneth's CSS suggestion that will do its job for your scenario, there's a beautiful jQuery plug-in 'Smart Truncation' I thought you should know about.
It is customizable - to truncate default, truncate in center of a paragraph or truncate but still keeping a file extension intact (if you're listing files). It's very light-weight and a great tool that I use on a lot of my websites too.
Here's the link. Scroll down for demos and download via Github. http://polarblau.github.com/smarttruncation/
-
3. Re: Truncating text instead of wrapping it...
jyeager11 Mar 6, 2013 12:16 PM (in response to kennethkawamoto2)kennethkawamoto2 wrote:
Try CSS text-overflow .
Example:
div {
width: 100px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
--
Kenneth Kawamoto
Hi Kenneth,
Your solution only seems to work if you know exactly how many pixels wide the container is. But these containers are dynamic width (they have display:inline-block applied to them to wrap tightly around the contents).
Can your solution be somehow amended to work with this constraint or should I look elsewhere?
-
4. Re: Truncating text instead of wrapping it...
Nancy O. Mar 6, 2013 1:30 PM (in response to jyeager11)What you have here is a Catch-22 loop.
If your container has no declared width, you can't calculate available space. Available space is contingent on a known width.
If div width is dynamically set based on content, then there is no available space to calculate. Make sense?
Nancy O.
-
5. Re: Truncating text instead of wrapping it...
kennethkawamoto2 Mar 6, 2013 2:29 PM (in response to Nancy O.)I was going to say what Nancy's said - but just tested this and it works fine without setting the width value explicitly (ie. variable/responsive width), at least on Webkit. So, jyeager11 - can you show us your HTML & CSS?
However, if you want to truncate multiline (wrapping) text, this CSS would not be useful because this is only designed for nowrap text. I think the only way is to add (or subtract) a character one by one to see if the container exceeds (or shrink to) the original width/height. Not elegant but I remember writing this routine for Flash myself, and Kenji Abe has written this for jQuery ( http://plugins.jquery.com/ellipsis/ ) so may be worth checking it out.
--
Kenneth Kawamoto
-
6. Re: Truncating text instead of wrapping it...
jyeager11 Mar 8, 2013 8:19 AM (in response to kennethkawamoto2)I stand corrected, Kenneth's first suggested CSS-only solution actually works with dynamic widths (you don't need to specify the width of the container in the CSS for it to work). Thanks!



