記事詳細

投稿日

2026年01月08日21時25分

タイトル

空白、段落などの形式を保持した表示にする

内容

HTML 側で white-space CSS プロパティ を使うのが最も簡単で安全です。

1. 基本的な考え方

@Html.DisplayFor は HTML エンコードされたテキストを出力するため、改行や空白はそのままではブラウザに反映されません。
CSS の white-space を使えば、テキスト内の改行や空白をそのまま表示できます。

代表的な値：

pre → 空白・改行を完全に保持（横スクロールあり）
pre-wrap → 空白・改行を保持しつつ、長い行は折り返す（推奨）
pre-line → 改行は保持するが、連続空白はまとめる

2. Razor + Bootstrap 最適化サンプル

Cshtml
@model YourNamespace.Models.YourModel

<div class="card">
    <div class="card-header">
        コンテンツ表示
    </div>
    <div class="card-body">
        <!-- 改行・空白を保持して表示 -->
        <div class="content-preserve">
            @Html.DisplayFor(model => model.Content)
        </div>
    </div>
</div>

<style>
    /* Bootstrapと併用可能な改行・空白保持用クラス */
    .content-preserve {
        white-space: pre-wrap;   /* 改行と空白を保持しつつ折り返し */
        word-wrap: break-word;   /* 長い単語も折り返す */
        font-family: inherit;    /* Bootstrapのフォントを継承 */
    }
</style>

3. ポイント

white-space: pre-wrap; が改行・空白保持のキモ
Bootstrap の .card や .card-body と組み合わせると見た目が整う
word-wrap: break-word; を追加すると長いURLや英単語もはみ出さない
@Html.DisplayFor は HTML エンコードされるため、ユーザー入力の安全性も確保される

4. 実行イメージ

入力（model.Content）：


これはテストです。

空白も    改行も
そのまま表示されます。

表示結果（ブラウザ）：


これはテストです。

空白も    改行も
そのまま表示されます。

✅ この方法なら Razor + Bootstrap 環境で安全かつ見た目も整った状態で改行・空白を保持できます。

もし希望があれば、この表示を Markdown風のスタイル にしてさらに読みやすくするバージョンも作れますが、作りますか？
そうすればコードや文章の整形にも対応できます。

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧