2021/01/11

CSSで文字列を改行させない方法【現役エンジニアが解説】

今回は、CSSで文字列を改行させない方法について、その方法と枠を超えた文字列の取り扱い方に分け、簡単に解説していきます。

文字列を改行させない

文字列を改行させないためには、white-spaceプロパティを使います。

white-spaceプロパティの値をnowrapにすることで、折り返しが行われません。

.hoge{
    white-space:nowrap;
}

上記のコードでは、hogeというクラスを持つ要素の文字列を折り返さないようにしています。

折り返さない設定では枠を超えて文字列が表示されることがあります。

overflowプロパティの値をhiddenにすると枠を超えた文字列を隠すことができます。

.hoge{
    white-space:nowrap;
    overflow:hidden;
}

上記のコードでは、hogeというクラスの要素の文字列を折り返さずに、枠を超えた文字列を隠しています。

折り返さず、枠を超えた文字列を省略して末尾を三点リーダーにさせられます。

これは、これまでの設定に、text-overflowプロパティの値をellipsisにすることで可能です。

.hoge{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

上記のコードでは、hogeのクラスの要素の文字列を折り返さず、枠を超えた文字列を省略して末尾を三点リーダーにしています。