ja | en

スタイル指定の応用で、表示する値の改行制御を行う方法を説明します。

「会社名」が長いという事例を図1、図2に示します。図1のように日本語文字の場合は Web ブラウザが適切に改行します。

図1 長い会社名(日本語)

しかし英数時で構成された場合は、改行されず、横スクロールバーが表示されます。

図2 長い会社名(英語)

これは Wagby の標準では、英数字の場合は空白を改行の区切り文字として認識するようになっているためです。 図2のように空白が存在しない場合、適切な改行箇所が見つかりません。

出力時のスタイルを指定することで、改行位置を調整します。

「会社名」項目の詳細定義を開きます。「出力制御>詳細画面>スタイル」を次のように指定します。

word-break:break-all

詳細画面

図3 詳細画面のスタイル設定

一覧画面

図4 一覧画面のスタイル設定

図3および図4の設定後は、詳細画面、一覧画面とも改行されるようになります。

図5 詳細画面の改行例
図6 一覧画面の改行例

標準では、Wagbyが提供するスタイルシートは次のようになっています。

R7.5.1以降

ブラウザ スタイル
IE,Firefox,Safariword-break: normal;
word-wrap: break-word;
Chromeword-break: break-word;
word-wrap: break-word;

R7.0.0〜R7.5.0

ブラウザ スタイル
(共通)word-break: normal;
word-wrap: break-word;

上で紹介したスタイルシートの書き換えは、標準設定では折り返しがうまくいかない、という場合に行ってください。

詳細画面のスタイルはpresentation/displayitem/@styleです。

一覧画面のスタイルはpresentation/displayitem/@styleForShowListです。

ja | en