Adobe XDでテキストがワードラップされる動作にする方法を紹介します。
[テキスト]ツールで文字を描画すると、デフォルトでは横幅が文字数に合わせて広がる動作になります。
利用シーンによっては、横幅を指定して横幅を超える場合は、ワードラップして折り返して複数行で表示したい場合があります。
この記事では、テキストツールで指定した幅で文字列を折り返し、ワードラップして文字を表示する方法を紹介します。
[テキスト]ツールを選択し、キャンバスをクリックすると、テキスト編集モードになります。文字を入力すると、文字列をキャンバスに描画できます。
デフォルトでは文字列の長さに合わせて横幅が設定され、文字列の折り返しは起きません。
ウィンドウの右側の[プロパティインスペクター]の[テキスト]セクションの設定を確認します。
幅の設定ボタンを確認すると、一番左の[幅の自動調整]のボタンが青色にハイライトされており、この設定が有効になっていることがわかります。
ワードラップをさせる場合は、真ん中の[高さの自動調整]のボタンをクリックして、こちらの設定に変更します。
[高さの自動調整]の設定に切り替わると、テキストエリアの周囲のハンドルの表示が切り替わります。
下図が、[幅の自動調整]の設定になっている場合です。テキストの下部に白丸のハンドルが1つ表示されています。
[高さの自動調整]の設定にすると、テキストの周囲4か所に白丸のハンドルが表示に切り替わります。
テキストの右側のハンドルをドラッグしてテキストの幅を狭めます。テキストとの幅を狭めると、テキストが折り返され複数行で表示されます。
好みの幅にテキストの幅を設定します。幅に合わせて、テキストがワードラップされて表示されます。
作成時から[高さの自動調整]に設定する場合は、[テキスト]ツールをクリックして選択し、キャンバスをドラッグして配置したい領域を囲みます。
テキスト編集モードになりますので、設定したい文字列を入力します。入力を確定すると、ドラッグして選択した矩形の幅に合わせてテキストが配置されます。
指定した幅でワードラップしてテキストを配置することができました。
