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

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

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

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

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

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;