positionとtranslateで見出しを中配置したら改行されてしまう・・・
見出しやテキストを中央配置したい時、posisionとtranslateを使用することがあると思います。
以前、文字を中央配置しようとした時に何故か見出しが改行されてしまい、改行されなくするためにはどうすれば良いか調べました。
使用頻度が余り多いコードではないため、たまに同じ事象が発生した時にはどんなコードを書くんだったっけ?といつも忘れてしまうので、備忘録として残すことにしました。
こんな感じ
テキスト1テキスト2テキスト3テキスト4
事象
このテキストをpositionとtranslateを使用して緑色の四角の縦横中央に配置します。
テキスト1テキスト2テキスト3テキスト4
テキストに対して下記CSSコードを指定します。
.test-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
結果がこちらです。
テキスト1テキスト2テキスト3テキスト4
このようにテキストが改行されてしまいます。
これはleft: 50%でテキストを右に50%ずらした時点で緑色の四角をはみ出るため、改行されてしまうのです。
対処方法
調べた結果、コードを1行追加するだけで解消されました。
そのコードとは『white-space: nowrap;』です。
.test-text {
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
テキスト1テキスト2テキスト3テキスト4
『white-space』とは 空白文字類(改行、半角スペース、タブ)の扱いを指定するプロパティです。
初期値が『white-space: normal』となっているため、white-spaceを指定しなければ親要素の横幅いっぱいの所で、自動折り返しが行われます。『white-space: nowrap』と指定することで自動折り返しがされなくなるのです。