I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I'd like to append '...' to the end.
For example, if I have the string:
'helloworldmynameisryan'
I want it to be displayed like so:
'helloworld...'
I'm just displaying my string in a div like this:
<div>DisplayMessage</div>
Is there a class that I could create that would only apply if the string were over 10 char?
Unfortunately there isn't a good cross browser way to do this using only CSS. 'text-overflow' relies on the width of the string, and not the length of string as you need.
You can use the .length property of strings in javascript to achieve this
function ellipsify (str) {
if (str.length > 10) {
return (str.substring(0, 10) + "...");
}
else {
return str;
}
}
Hope this helps.
Firefox does in fact now support this, you just need to ensure that whatever you are trying to 'truncate' has block level formatting and a width - which could be the parent.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
width : 100px; /* this could be defined on any parent */
}
Without using any serverside script or javascript you can not do this.
Use below function.
function LimitCharacter($data,$limit = 20)
{
if (strlen($data) > $limit)
{
$data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
return $data;
}
else
{
return $data;
}
}
call it as LimitCharacter($yourString,5);
Javascript
var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";
CSS
.limtiCharClass {
-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 */
}
it´s called ellipsis and you can use it on a block element.
However it does not work in Firefox and you cannot set the width to exactly 10 characters as you cannot specify the width in characters in css.
If you want exactly 10 characters and Firefox compatibility you will have to use javascript or a server-side solution.
check ellipsis:http://www.quirksmode.org/css/textoverflow.html
or try this:
.ellipsis{
white-space:nowrap;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
jQuery plugin for this:
http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/
The ellipses is a css3 function and when testing in different browsers it has issues. A quick get around would be to define a specific with to the div or span with overflow hidden and then add a background images which says "..."
The best way is using:
text-overflow: ellipsis;
in your css
This will restrict your text to the width of the container. If the text exceeds the width, it will instead be displayed with an ellipsis (...).
This may help: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
According to quirksmode, if there is a long text like
<div>11111111111111111111111111111111111111111111111111111111</div>
To wrap this you have many ways, use <wbr> tag like below
<div>111111111111111111111111111<wbr>11111111111111111111111111111</div>
It will be displayed like
1111111111111111111111
1111111111111111111111
or use ­ instead of , output will be
111111111111111111111-
1111111111111111111111
Or if you are looking for JS solution, then use this.
