折り返し無し｜改行もしないで文字制限の様にCSSだけで…を表示させる

文字制限の様に改行させない一行表示

自分用のコピペ記事です。なのでレベル的に初級です。

一行長文をPCで見る分にはまあまあ許せるレベルだけど、モバイル端末で見たときに「ここ文字制限かけないな～」なんて思う機会がたまにあったりします。

文字制限をかけることがブログの機能に有るには在るのだけど、しかしそれができる場所とできない場所があったりするので、とても歯がゆい気持ちにさせてくれる。

これから書いていくものはCSSだけで出来る。自分がいざ使いたい時に「あれ…どうやるんだったかな～」なんて事が僕にはよくあるので自分用のコピペ記事なわけでございます。

折り返し無し、改行もしない。文字制限の機能の様に長文を一行だけに表示させるCSS

なんて言ったら良いのか。ま、左から表示される文字が決められた範囲の右端にぶつかると下に改行することなく「…」で完結するというか、表示的にはそこで終わらせる方法、かなぁ？

この素晴らしい世界に祝福を！

最近このすばのスマホアプリがリリースされたのでなんとなく。ちょっと短めなので全部ひらがなにします。

このすばらしいせかいにしゅくふくを！

これを横幅が今より狭い範囲で表示させると以下。

このすばらしいせかいにしゅくふくを！

.sample01 {
width: 90px;
padding: 10px;
border: 1px solid #ddd;
}

今の状態はwidthを適当に90pxにしただけ。これだけ狭いと当然一行では表示されないので改行する。

このすばらしいせかいにしゅくふくを！

.sample01 {
width: 90px;
padding: 10px;
border: 1px solid #ddd;
white-space: nowrap;
}

改行禁止なので、範囲指定の無視をする。なかなかの根性だと思う。

このすばらしいせかいにしゅくふくを！

.sample01 {
width: 90px;
padding: 10px;
border: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
}

言葉足らずなかんじになってるけど、完成まであと少し。

このすばらしいせかいにしゅくふくを！

.sample01 {
width: 90px;
padding: 10px;
border: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

こんな感じで完成。-webkit-text-overflow: ellipsis;くらい入れた方いいのかどうなのか…。

ちなみにこの「…」が環境依存するのか何なのか、PCとスマホでの見え方が若干違う。リストやリンクでもこれは使えるのだけど、モバイル表示での「…」だけがcolor設定を無視して#000000で表示されたり、僕の画面の中では中途半端な手の焼きようをしてくれている。

使いどころを選ぶけれど、たまに「ここ別にモバイルでの表示は一行でもいいよなー。でもPCとモバイルと表示方法を別々にするのもなー」なんて所が出てきたりするので、そんな「たまに用」です。

そしてコピペ用と言いながら、ここに書いたことを忘れる僕でもある。