Hi Elitenet and welcome to our :)

I think you should consider using pure CSS for achieving this rather than using a truncate technique for instance since the text is then just cropped at an unnatural place sometimes and it can be really hard to control.

So I urge you to use the text-overflow: ellipis technique instead, which you can read more about here https://css-tricks.com/almanac/properties/t/text-overflow/

This has the benefit that the text is not cropped but will be written in the HTML source so it's still accessible and makes sense if a search engine bot is visiting the site or if a person is using a screenreader.

By using a truncate approach the text will be cropped of and make no sense. With the approach linked to above it's only the visual context of the text that is changed.

I hope this makes sense.

/Jan

Hi Jan

thanks for the reply and creative workaround, thats an option I could easily implement and would make sense.
I am just thinking, would it be possible to break the text in the text field with some kind of marker in the code? have you ever seen something like that used in Umbraco?
Im thinking of the same feature as in wordpress' "read more" tag.

Thanks! :-)
/Peter
 

Hi Peter

The way I see it's this is the proper solution, not the workaround. Truncating the string is a workaround, which has some bad side-effects in my humble opinion :)

You can set dimensions some dimensions on your elements where these texts should be displayed where you can add the readmore link after the "cropped" text.

But if you want to use a workaround then you can use Substring for instance...

Like this @Model.Content.GetPropertyValue("yourproperty").ToString().Substring(0, 200)

/Jan

Yes it has a bad effect cause the text will be abnormally "cut". 
I will try to experiment with some kind of indexOf command in razor, now that I see your code, that might be possible to cut the text with a character known to the editor.
Thank you for the help!

:-) /Peter 

Hi Peter

You're welcome - Looking forward to see what solution you come up with :) Ah yes indeed indexof should also be possible to use.

/Jan

I like to use Tim Geyssens Prop editor for this. I usually use it for page meta info and limit to the recommended lengths. 53 chars for Title, 155 chars for Meta Description etc. I think it would be perfect for your use here. http://www.nibble.be/?p=285

It works great & shows remaining characters as the user is typing. Simple to set up too.

I do agree with Jan that substring is a bad idea - especially if it's a rich text editor, pretty good chance you'd end up chopping a html tag.

Thanks -Roger

Yeah the char limit package is good for limiting a field in the backoffice and making sure it's never becoming longer than X number of characters. It's good for SEO fields. But sometimes a summary for an article for instance will be longer and when one visits the article page the summary should be shown in full length but when viewing the article overview page you might want to limit the display of the summary...and then the char limit package does not make sense :) - So it's a matter of the context I'd say.

/Jan

Hi Jan I finally put this together, also found some useful stuff on forum. Just some cleanup, not very clean code though. Optionally, if this should work like a SEO module, I would need a couple of keywords, and the "truncate-code" should search for a sentence which included the keyword, and it would take excerpt from that. But that will be a later version. (I think Yoast works almost like that).

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{
    var _textItem = @CurrentPage.summary.ToString();
    _textItem = _textItem.Replace("<p>", "");
    _textItem = _textItem.Replace("</p>", "");
    _textItem = _textItem.Replace("<br />", " ");
    _textItem = _textItem.Replace("<br/>", " ");
    _textItem = _textItem.Replace("</strong>", "");
    _textItem = _textItem.Replace("<strong>", "");
    _textItem = _textItem.Replace("\"", "");
}
@if (_textItem.Length < 150)
{
    @_textItem
}
else
{
    @_textItem.Substring(0, 150)
}

is working on a reply...