概要へ移動

このページで解説するコードの実行結果。

文末に着目。ellipsisの場合、「…」が表示されている。

clip

意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

ellipsis

意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
p {

    max-width:          15em;           /*  最大幅 */

    color:              purple;         /*  文字の色 */

    background-color:   #fef;           /*  背景色 */

    margin-right:       5em;            /*  右マージン */

    font-size:          1.2em;          /*  文字の大きさ */

}



.white-space-nowrap {

    white-space:        nowrap;         /*  改行禁止 */

}



.overflow-wrap-normal {

    overflow-wrap:      normal;         /*  自動改行禁止 */

}

text-overflowの概要

文字列があふれ出て省略された場合、それを示す記号を表示するか否か。（← デフォルトでは非表示）

（表） text-overflowの設定値
設定値文字列があふれ出た表示デフォルト
clip非表示○
ellipsis表示

「overflow: hidden; 」と一緒に使うことが多い。

まず、文字列があふれ出ている状態の例。上の例は「white-space: nowrap; 」を下の例は「overflow-wrap: normal;」を使っている。

HTML : 適用するHTML
<p class="sample white-space-nowrap">

    意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

</p>



<p class="sample overflow-wrap-normal" lang="de">

    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

</p>
実行結果

意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

まず、 overflow: hidden; を使って、あふれた部分を非表示にする。

CSS : hidden
.sample  {

    overflow:   hidden;

}
実行結果

clip

デフォルトなので何も変わらない。

CSS : clip
.sample  {

    overflow:       hidden;

    text-overflow:  clip；

}
実行結果

意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

ellipsis

隠れる直前の部分が「 … 」=「 &#8230; 」になっていることが分かる。

CSS : ellipsis
.sample  {

    overflow:       hidden;

    text-overflow:  ellipsis;

}
実行結果

意志のないところに、感動はない。海や夕焼けも、反応する意志がなければただの風景にすぎない。 ～ 村上龍

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

Emmet : tov

記述Visual Studio Code
tovtext-overflow: ellipsis;
tovctext-overflow: clip;