Skip to main content

Razor Blade Tutorials

Tutorial HomeRazor.Blade

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.

RazorBlade API Docs

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&uuml... 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 &amp... 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

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.

@inherits ToSic.Sxc.Dnn.RazorComponent
@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 -->