ASP.NET Core MVC で表示するテーブルで css の overflow: hidden と text-overflow: ellipsis を使って文字列の長さ制限するとともに末尾に三点リーダーを表示する例を紹介します。下の画像がその例です。ターゲットフレームワークは .NET 8.0、ブラウザは Chrome、フォントはメイリオ、サイズは 16px です。
先の記事「文字列の長さ制限、三点リーダー表示」では、ASP.NET Web Forms アプリの GridView の例を紹介しました。
その記事と同様に、description 列の文字列を div 要素に入れて、それに以下の css を適用しています。
<style type="text/css">
div.style1
{
width: 320px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
html と css の機能なのでアプリが ASP.NET Web Forms から ASP.NET Core MVC に変わっても関係ないと思われるかもしれませんが、ブラウザに送信される文字の形式が異なります。結果は同じになりますが。
参考までに以下に違いを書いておきます。
先の記事の Web Forms の例では、コードビハインドで C# のコードで設定した文字列は UTF-8 に変換されてブラウザに送信されています。文字列は Literal コントロールの Text プロパティに設定したのでエスケープはされません。（なので、先の記事では < > & という文字は C# のコードでは < > & としています）
一方、この記事の ASP.NET Core MVC の場合は、< > & という文字は ASP.NET がエスケープして < > & という文字列としてブラウザに送信されます。また、日本語や絵文字（たぶん非 ASCII 文字すべて）は数値文字参照 &#xNNNN; 形式（NNNN は 16 進 Unicode）に変換されてブラウザに送信されます。以下の画像を見てください。
ちなみに、例えば、🍎 は上の画像では 🍎 に該当します。🍎 を IME パッドで見ると Unicode: U+1F34E となっています。
一番上の画像の結果から分かるように、サーバーからブラウザに送信される各文字の形式は関係なく、ブラウザ上に表示された文字列の長さで制限がかかり、css の width: 320px で指定された幅いっぱいに三点リーダを含めて表示されています。
フォントはメイリオ、サイズは 16px ですが、MS Gothic などの等幅フォントを使った場合も、フォントサイズを変えた場合も、ブラウザ上に表示される文字列の長さで制限がかかるのは同じです。
三点リーダーを表示する text-overflow:ellipsis はもともと IE の独自拡張だそうですが、最近は他のブラウザでも取り入れられているようです。Windows 10 の Chrome 125.0.6422.61, Edge 125.0.2535.51, Firefox 126.0, Opera 110.0.5130.23 で試してみましたが、同じ結果が得られました。
参考に、上の画像を表示するのに使った ASP.NET Core MVC アプリのコードを載せておきます。
Model
namespace MvcNet8App2.Models
{
public class Ellipsis
{
public int Id { get; set; }
public string Description { get; set; } = null!;
}
}
View
@model IEnumerable<MvcNet8App2.Models.Ellipsis>
@{
ViewData["Title"] = "Ellipsis";
}
<style type="text/css">
body {
font-family: "メイリオ";
font-size: 16px;
}
div.style1 {
width: 320px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<h1>Ellipsis</h1>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
<div class="style1">
@Html.DisplayFor(modelItem => item.Description)
</div>
</td>
</tr>
}
</tbody>
</table>
Controller / Action Method
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.DataProtection;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using MvcNet8App2.Models;
using System.Diagnostics;
using System.Security.Claims;
using System.Security.Principal;
namespace MvcNet8App2.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private readonly CookieAuthenticationOptions _options;
public HomeController(ILogger<HomeController> logger,
IOptions<CookieAuthenticationOptions> options)
{
_logger = logger;
_options = options.Value;
}
// ・・・中略・・・
public IActionResult Ellipsis()
{
var model = new List<Ellipsis>
{
new ()
{
Id = 1,
Description = "エスケープされた < > & " +
"などの文字はどのようになるか？"
},
new() {
Id = 2,
Description = "Proportional Font WWWWWWWWWWW " +
"iiiiiiii llllll などは？"
},
new ()
{
Id = 3,
Description = "サロゲートペア 𠀋 𡈽 𠮟 などは" +
"どのようになるか？"
},
new() {
Id = 4,
Description = "絵文字 🍎 🍏 (サロゲートペア) " +
"👨🌾 (ZWJ で結合) などは？"
}
};
return View(model);
}
// ・・・中略・・・
}
}