_text-crop-ellipsis.cshtml

@using Connect.Razor.Blade;
<div>
    return to <a href="@Link.To()">overview</a>
</div>
<h1 class="sc-element">
  Razor Blade Text.Crop and Text.Ellipsis
  @Edit.Toolbar(Content)
</h1>
<div>
    These demos show how to crop text properly, because Razor Blade handles a lot of issues you'll usually have cropping text. 
</div>

@{
  // overlay numbers to show the real length
  //             12345678901234567     890123    456     78901
  var sample1 = "We love Tokyo, Z&uuml;rich &amp; M&uuml;nchen";
  var realLength = 31;
}

<h2>Example Text</h2>
Original which visually has @realLength characters:

<ul>
    <li>Unencoded: @sample1</li>
    <li>As HTML: @Html.Raw(sample1)</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;amp; (the &amp; character) or umlauts because ü = &uuml;.
</div>

<table border="1">
    <tr>
        <th></th>
        <th colspan="2"><em>C# Substring</em></th>
        <th colspan="2"><em>Razor Blade</em></th>
    </tr>
    <tr>
        <th>Length</th>
        <th>C# Substring</th>
        <th>C# dot-dot-dot</th>
        <th>Text.Crop(...)</th>
        <th>Text.Ellipsis(...)</th>
    </tr>
    @for(var len = 1; len <= 32; len++) {
        <tr>
            <td>@len</td>
            <td>@sample1.Substring(0, 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>