Angularを使用してWebシステムを作成しています。
以下のように文字と文字の間に全角スペースを表示させ文字間隔をそろえたいです。
表示させる方法について教えていただきたいです。よろしくお願いいたします。
<!-- 全角スペースでコロンまでの文字間隔をそろえたい -->
<div>文字列 ：</div>
<div>文字列です ：</div>
&emsp  （セミコロン消してます）も試しましたが、連続して使用するとうまく認識されなくなります
（開発者ツール上でもうまく表示されていません）
また、div style="white-space: pre; や preタグ も試しましたが
前者は全角空白だとうまくいかず、後者はデフォルトでマージンが設定されているため適していませんでした。
（半角スペースのみだとコロンの位置がそもそもずれてしまう、スタイルを打ち消すなどはNGとしたいです）
デフォルトで、Angularテンプレートはフレームワークが不要とみなす空白を保持しません。これは、要素間の空白と、テキスト内の折り畳み可能な空白の2つの状況で一般的に発生します。
@ComponentデコレーターでpreserveWhitespaces: trueを指定することで、Angularにテンプレート内の空白を保持するように指示できます。
これを追加すればスペースが勝手に削除されなくなります
自分的にはスペースで調整するなんてめんどくさいやり方より右寄せした方が簡単で早くて分かりやすいんじゃないかな
フォントの違いや半角英数字を気にしなくて済むし
See the Pen Untitled by amate (@amate-the-vuer) on CodePen.
table. tr, td 要素を使ってはいかが？ 使えない理由があるならそれを書いてください。
@eoao
Questioner
table要素を使用しても全角スペース複数表示できないです。
申し訳ないですが具体的なコードを教えていただけるとありがたいです。
また、全角スペースを複数連続表示させるのは質問文に記載したようなdivでは不可能ということでしょうか？
全角スペースとかをつかうのではなく、table. tr, td 要素を使って文字列とコロンを別の列にするのです。
@eoao
Questioner
説明ありがとうございます。
今回については1要素としてまとめて表示させたいので、別の列として表示させるのはできないです。
仮に囲って1要素にするにしても、コード的に複雑化してしまうため避けたいです。
質問の「文字列」「文字列です」が、例えば英文混じりでプロポーショナルフォントを使った場合、文字数を数えてコロンの位置がそろうよう空白で調整するというのは意味が無いです。そのあたり理解されているでしょうか？ 何にせよ空白で調整というのは完全に悪手だと思います。他の手段を考えることをお勧めします。
筆者は Angular を使ったことはありませんが質問内容についてはHTML,CSSで解決できそうだと思ったため回答させていただきます。
質問者様が「文字ぞろえ」を行って具体的にどういうことをしたいのか分からなかったので、一般的に考えられそうなユースケースとしてリストテーブルをイメージして構築しました。
以下が筆者の考えたアプローチ方法で、HTMLでは<dt>,<dd>要素を、CSSでは疑似要素,position,flexなどを用いた内容になります。
See the Pen Untitled by benjuwan (@benjuwan) on CodePen.
左側（dt）と右側（dd）はそれぞれCSSでwidthを%指定しており、細かい部分はmax-width, min-widthを使っています。
もし使用される際は上記部分を調整してください。
回答が参考になりますと幸いです。
少しめんどくさいですが
spanタグをインラインブロックにして幅を指定するのはどうでしょう
spanタグの部分はdivタグでも可です
<div><span style="display:inline-block;width:6em;">文字列</span>：</div>
<div><span style="display:inline-block;width:6em;">文字列です</span>：</div>