cssではみ出た文字を制御する

投稿者: | 2015年11月19日

長い文字列をブロックの中に収めるcssについてのメモです。

サンプルとなるHTMLはこちら

<style>
div#sample{
    width:100px;
    border:1px solid red;
}
</style>

<div id="sample">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>

表示例

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg

はみ出した文字列を省略する場合

はみ出した部分を「…」に変換する方法です。

<style>
div#sample2{
    width:100px;
    border:1px solid red;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

<div id="sample2">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>

表示例

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg

はみ出した文字列を折り返す場合

はみ出した部分を折り返してボックス内にすべて表示する方法です。

<style>
div#sample3{
    width:100px;
    border:1px solid red;

    word-wrap:break-word;
}
</style>

<div id="sample3">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>

表示例

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg