#1 RazorBlade - Text.Crop() and Text.Ellipsis()
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 |
<!-- 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>
}
#1 RazorBlade - Text.Crop() and Text.Ellipsis()
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@{
var sample1 = "We love Tokyo, Zürich & München";
var realLength = 31;
}
<!-- unimportant stuff, hidden -->
RazorBlade Text.Crop(...) and... <!-- unimportant stuff, hidden -->
<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>
<!-- unimportant stuff, hidden -->