How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px) and I would like to add dots "..." at the end. Something like this for example:
Given string:
Some really long string that I need to fit in there! Desired output in fixed-width-column should be:
Some really long string... You can do this with CSS alone:
.box { -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ overflow:hidden; /* don't show excess chars */ white-space:nowrap; /* force single line */ width: 300px; /* fixed width */ } Note: You will want to check on the latest browser support.
Just with some CSS like answer of Gordon. Just added the display:block property for an inline element like <a> or <p> :
a#myText{ display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 300px; } You could use it with many browser like you can see on this link : http://caniuse.com/#search=text-overflow
I had a similar problem, the way I solved it was to strip the string down to 60 characters and append an '...' to the end of it.
An ugly solution? Yes, but unless there is a jQuery solution it's probably your best bet.
If you're using Smarty, this is how I solved the problem:
{$my_string|truncate:60} Here's a function I use to truncate strings. Like most of the suggestions here, it uses substr to truncate the string, but it will avoid splitting the string mid-word:
function truncate_text($string, $min_chars, $append = ' …') { $chars = strpos($string, " ", $min_chars); $truncated_string = substr($string, 0, $chars) . $append; return $truncated_rstring; } I think simple cutting text after N characters isn't what you're looking for. It's not a solution because the following text have both 15 character length: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - notice that the second "word" is about three times longer than the first one.
JavaScript might be a solution:
First prepare your mark-up:
<p id="abc">{TEXT}</p> Where {TEXT} is your text truncated to 150 characters + ...
Now when we've got a good base for JavaScript we can try to make what you're looking for:
<html> <head> <style type="text/css"> #abc { width: 100px; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var ref = document.getElementById("abc"); var text = ref.text; ref.removeChild(ref.firstChild); ref.appendChild(document.createTextNode("...")); var maxHeight = ref.offsetHeight; var pos = 0; while (ref.offsetHeight <= maxHeight) { var insert = text.substring(0, ++pos) + "..."; var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); } ref.replaceChild(finalReplace, ref.firstChild); }, false); </script> </head> <body> <p id="abc">My very, very, very, very, very, very, very long text...</p> </body> </html> 