#1 RazorBlade - Text.Crop() and Text.Ellipsis()
Requirements
Resources
RazorBlade Text.Crop(...) and Text.Ellipsis(...) v1.1
These demos show how to crop text properly, because Razor Blade handles a lot of issues you'll usually have cropping text.
Example Text
Original which visually has 31 characters:- The human view - how it looks for users:
We love Tokyo, Zürich & München
123456789-123456789-123456789-1 - The truth - how the string looks internally:
We love Tokyo, Zürich & München
123456789-1234567.....89-123....456.....789-1
Word-Split Problems
This demonstrates how strings are cut off in the middle of words if we don't use razor blade. It also breaks html entities like & (the & character) or umlauts because ü = ü.
Using C# Method | Razor Blade | ||
---|---|---|---|
Len | C# Substring | Text.Crop(...) | Text.Ellipsis(...) |
1 | W... | W | W… |
2 | We... | We | We… |
3 | We ... | We | We… |
4 | We l... | We | We… |
5 | We lo... | We | We… |
6 | We lov... | We | We… |
7 | We love... | We love | We love… |
8 | We love ... | We love | We love… |
9 | We love T... | We love | We love… |
10 | We love To... | We love | We love… |
11 | We love Tok... | We love | We love… |
12 | We love Toky... | We love | We love… |
13 | We love Tokyo... | We love Tokyo | We love Tokyo… |
14 | We love Tokyo,... | We love Tokyo | We love Tokyo… |
15 | We love Tokyo, ... | We love Tokyo | We love Tokyo… |
16 | We love Tokyo, Z... | We love Tokyo | We love Tokyo… |
17 | We love Tokyo, Z&... | We love Tokyo | We love Tokyo… |
18 | We love Tokyo, Z&u... | We love Tokyo | We love Tokyo… |
19 | We love Tokyo, Z&uu... | We love Tokyo | We love Tokyo… |
20 | We love Tokyo, Z&uum... | We love Tokyo | We love Tokyo… |
21 | We love Tokyo, Zü... | We love Tokyo, Zürich | We love Tokyo, Zürich… |
22 | We love Tokyo, Zü... | We love Tokyo, Zürich | We love Tokyo, Zürich… |
23 | We love Tokyo, Zür... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
24 | We love Tokyo, Züri... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
25 | We love Tokyo, Züric... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
26 | We love Tokyo, Zürich... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
27 | We love Tokyo, Zürich ... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
28 | We love Tokyo, Zürich &... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
29 | We love Tokyo, Zürich &a... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
30 | We love Tokyo, Zürich &am... | We love Tokyo, Zürich & | We love Tokyo, Zürich &… |
31 | We love Tokyo, Zürich &... | We love Tokyo, Zürich & München | We love Tokyo, Zürich & München |
32 | We love Tokyo, Zürich &... | We love Tokyo, Zürich & München | We love Tokyo, Zürich & München |
#1 RazorBlade - Text.Crop() and Text.Ellipsis()
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 @using ToSic.Razor.Blade; <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2><em>RazorBlade</em> Text.Crop(...) and Text.Ellipsis(...) <em>v1.1</em></h2> <p>These demos show how to crop text properly, because Razor Blade handles a lot of issues you'll usually have cropping text.</p> </div> </div> <h2>Example Text</h2> Original which visually has @realLength characters: <ul> <li>The human view - how it looks for users: <br> <code> @Html.Raw(sample1)<br> 123456789-123456789-123456789-1 </code> </li> <li>The truth - how the string looks internally: <br> <code> @sample1<br> 123456789-1234567.....89-123....456.....789-1 </code> </li> </ul> <h2>Word-Split Problems</h2> <div> This demonstrates how strings are cut off in the middle of words if we don't use razor blade. It also breaks html entities like &amp; (the & character) or umlauts because ü = &uuml;. </div> </trim> @{ sample1 = "We love Tokyo, Zürich & München"; realLength = 31; } <table class="table table-hover table-sm"> <!-- headers --> <tr> <th></th> <th><em>Using C# Method</em></th> <th colspan="2"><em>Razor Blade</em></th> </tr> <tr> <th>Len</th> <th>C# Substring</th> <th>Text.Crop(...)</th> <th>Text.Ellipsis(...)</th> </tr> <!-- the code --> @for(var len = 1; len <= 32; len++) { <tr> <td>@len</td> <td>@sample1.Substring(0, len)...</td> <td>@Html.Raw(Text.Crop(sample1, len))</td> <td>@Html.Raw(Text.Ellipsis(sample1, len))</td> </tr> } </table> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })