<h2>The samples with different styles generating ellipsis or not when the text is overflown</h2>

<hr>

<h4>1. 'display: inline(or inline-block)' container: Ellipsis</h4>
<p class="p-inline-block">
  some text some text some text some text some text
</p>

<hr>

<h4>2. 'display: block' container: No ellipsis</h4>
<div class="text-container">
  <p>
    some text some text some text some text some text
  </p>
</div>

<hr>

<h4>3. "display: flex" container : No ellipsis</h4>
<p class="p-inline-flex">
  some text some text some text some text some text
</p <hr>

<h4>4. flex-item inside "display: flex": Ellipsis</h4>
<div class="flex-container">
  <p class="p-inline-flex-in-container">
    some text some text some text some text some text
  </p>
  <span>Other text</span>
</div>
body {
  font-family: sans-serif;
  padding: 1rem;
  max-width: 720px;
  margin: 0 auto;
}

hr {
  margin: 1rem 0;
}

.text-container {
  overflow: hidden;
  width: 100px;
  background: blue;
  white-space: nowrap;
  color: white;
  text-overflow: ellipsis;
}

.flex-container {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: skyblue;
}

p.p-inline-block {
  width: 100px;
  overflow: hidden;
  display: inline-block;
  background: red;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
}

p.p-inline-flex {
  display: inline-flex;
  overflow: hidden;
  background: skyblue;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
}

p.p-inline-flex-in-container {
  overflow: hidden;
  background: green;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 0 1 auto;
}

p.p-inline-flex-in-container + span {
  flex: 0 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.