<p>Once, I tried to apply it and failed. And I found out several things.</p>
<h2 id="heading-overflow-hidden-and-white-space-nowrap">"overflow: hidden" and "white-space: nowrap"</h2>
<p>In this case, because "white-space: nowrap" is applied, there is only one line.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/gOvZbNe">https://codepen.io/bada3670/pen/gOvZbNe</a></div>
<h2 id="heading-overflow-hidden-and-white-space-pre">"overflow: hidden" and "white-space: pre"</h2>
<p>In this case, because "white-space: pre" is applied, if there are many lines, each line has '…'.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/MWQZYNN">https://codepen.io/bada3670/pen/MWQZYNN</a></div>
<h2 id="heading-display-flex">"display: flex"</h2>
<p>"display: flex" disables it.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/LYQMEvb">https://codepen.io/bada3670/pen/LYQMEvb</a></div>


Once, I tried to apply it and failed. And I found out several things.

## "overflow: hidden" and "white-space: nowrap"

In this case, because "white-space: nowrap" is applied, there is only one line.

%[https://codepen.io/bada3670/pen/gOvZbNe]

## "overflow: hidden" and "white-space: pre"

In this case, because "white-space: pre" is applied, if there are many lines, each line has '…'.

%[https://codepen.io/bada3670/pen/MWQZYNN]

## "display: flex"

"display: flex" disables it.

%[https://codepen.io/bada3670/pen/LYQMEvb]

examplist

examplist

When Can Ellipsis Be Applied?

"overflow: hidden" and "white-space: nowrap"

"overflow: hidden" and "white-space: pre"

"display: flex"